zoukankan      html  css  js  c++  java
  • Vue.js父子通信之所有方法和数据共享

    <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>parentChildComponent</title>
        <script src="js/vue.js"></script>

        <template id="parent">
          <div>
            I am parent component !{{msg}};I accept :{{msg2}}
            <hr>
            <child ref="child"></child>
          </div>
        </template>

        <template id="child">
          <div>
            I am child component !{{msg}};I accept :{{msg2}}
          </div>
        </template>

      </head>
      <body>
      <script>
        window.onload=function(){
          let child={
            template:'#child',
            data(){
              return {
                msg:'Data of child !',
                msg2:''
              }
            },
            mounted(){
              this.msg2=this.$parent.msg;
            }
          };
          let parent={
            template:'#parent',
            components:{
                child
            },
            data(){
              return {
                msg:'Data of parent !',
                msg2:''
              }
            },
            mounted(){
              this.msg2=this.$refs.child.msg
            }
          };
          new Vue({
            el:'#app',
            components:{
                parent
            }
          });
        }
    </script>
        <div id="app">
          <parent></parent>
        </div>
    </body>
    </html>

        打通父子之间所有数据和方法的共享:
          父模板:<child ref="子名称"></child>
          父访问子: 父组件: this.$refs.子名称.子数据/方法名()
          子访问父: 子组件: this.$parent.子数据/方法名()

    焦大叔叔
  • 相关阅读:
    详解GaussDB(for MySQL)服务:复制策略与可用性分析
    华为云的研究成果又双叒叕被MICCAI收录了!
    充分释放数据价值:安全、可信6到飞起
    未来云原生世界的“领头羊”:容器批量计算项目Volcano 1.0版本发布
    一文带你掌握OBS的两种常见的鉴权方式
    数据库实践丨MySQL多表join分析
    技术贴丨教你使用华为云鲲鹏服务器部署Discuz!论坛
    python Scrapy 从零开始学习笔记(二)
    python Scrapy 从零开始学习笔记(一)
    从零开始学Electron笔记(七)
  • 原文地址:https://www.cnblogs.com/tiny-jiao/p/6539324.html
Copyright © 2011-2022 走看看