Vue2---父子组件之间的访问

2017-05-04 00:41 龙恩0707 阅读(3105) 评论(0) 编辑收藏举报

个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来，特别在面试的时候，别人问你的知识点的时候答不上来那种尴尬，但是平时经常使用到，只是说不出所以来的，因此写博客是最好的思路。

阅读目录

Vue2--父子组件的访问

回到顶部

Vue2--父子组件的访问

父组件访问子组件，子组件访问父组件，或者子组件访问根组件，Vue.js 都提供了相对应的API。
1. 父组件访问子组件，使用 $children 或$ refs
2. 子组件访问父组件；使用 $parent
如下代码定义了父组件<parent-component>，父组件模板定义了2个子组件；在父组件中，通过 this. $children 可以访问子组件。 this.$ children 是一个数组，它包含所有子组件的实列；如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component1">
      <p>{{ msg }}</p>
    </template>
    <template id="child-component2">
      <p>{{ msg }}</p>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component1></child-component1><child-component2></child-component2><button @click="showmsg">显示子组件的数据</button></div>', 
      components: {
        'child-component1': {
          template: '#child-component1',
          data: function() {
            return {
              msg: '这是子组件1'
            }
          }
        },
        'child-component2': {
          template: '#child-component2',
          data: function() {
            return {
              msg: '这是子组件2'
            }
          }
        }
      },
      methods: {
        showmsg: function() {
          for (var i = 0; i < this.$children.length; i++) {
            alert(this.$children[i].msg);
          }
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>

查看效果

理解$refs
在子组件上使用 ref指令，可以给子组件指定一个索引ID，如下代码：

<child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2>

在父组件中，则通过$refs.索引ID访问子组件的实例：

showmsg: function() {
  alert(this.$refs.A1.msg);
  alert(this.$refs.A2.msg);
}

所有的代码如下：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component1">
      <p>{{ msg }}</p>
    </template>
    <template id="child-component2">
      <p>{{ msg }}</p>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2><button @click="showmsg">显示子组件的数据</button></div>', 
      components: {
        'child-component1': {
          template: '#child-component1',
          data: function() {
            return {
              msg: '这是子组件1'
            }
          }
        },
        'child-component2': {
          template: '#child-component2',
          data: function() {
            return {
              msg: '这是子组件2'
            }
          }
        }
      },
      methods: {
        showmsg: function() {
          alert(this.$refs.A1.msg);
          alert(this.$refs.A2.msg);
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>

查看效果

理解$parent
下面有一个子组件 child-component 和一个父组件 parent-component, 在子组件中，通过 this.$parent 可以访问到父组件的实例；如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component">
      <div>
        <p>111111</p>
        <button @click="showmsg">显示父组件的实例</button>
      </div>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component></child-component></div>', 
      components: {
        'child-component': {
          template: '#child-component',
          methods: {
            showmsg: function() {
              alert(this.$parent.msg);
            }
          }
        }
      },
      data: function() {
        return {
          msg: 'parent component msg'
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>