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.子数据/方法名()

    焦大叔叔
  • 相关阅读:
    django 静态文件模版上传下载配置
    drf ModelViewSet之匹配路由参数
    Django drf序列化外键关联表ID以为字段
    Django 自关联递归序列化模块 django-rest-frame-recursive模块
    Python利用Psycopg2模块将Excel表格数据导入Postgressql
    PyTorch中view的用法
    P1113 杂务 【拓扑排序】
    P3916 图的遍历 【反向建图+DFS】
    P2814 家谱【map型的并查集】
    P1102 A-B 数对【map】
  • 原文地址:https://www.cnblogs.com/tiny-jiao/p/6539324.html
Copyright © 2011-2022 走看看