Vue-07-组件访问

一、父子组件的访问方式

有时我们需要父组件直接访问子组件，子组件直接访问父组件，或者组组件访问根组件

父组件访问子组件：使用 $children 或 $refs

子组件访问父组件：使用 $parent

1. 父访问子

（1）$children（用得较少）

      methods: {
        btnClick() {
          // 1.$children
          console.log(this.$children);
          for (let c of this.$children) {
            console.log(c.name);
            c.showMessage();
          }
        }
      }

（2）$refs

this.$refs 得到的是一个对象类型，默认是一个空的对象，必须在自定义组件标签上加 ref="键名"

  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick">按钮</button>
  </div>
  <template id="cpn">
    <div>我是子组件</div>
  </template>
  <script src="./js/vue.js"></script>
  <script>
    const cpn = {
      template: '#cpn',
      data() {
        return {
          name: '我是子组件的name'
        }
      },
      methods: {
        showMessage() {
          console.log('showmessage')
        }
      }
    }
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        cpn
      },
      methods: {
        btnClick() {
          // 2.$refs
          console.log(this.$refs);
          console.log(this.$refs.aaa);
          console.log(this.$refs.aaa.name);
        }
      }
    })

2. 子访问父 

（1）$parent 访问父组件（用得更少）

耦合度太高，实际开发中不建议使用

          methods: {
            btnClick() {
              // 1.访问父组件$parent
              console.log(this.$parent);  //访问到VueComponent
              console.log(this.$parent.name);
            }
          }

（2）$root 访问根组件（用得较少）

          methods: {
            btnClick() {
              // 2.访问根组件$root
              console.log(this.$root);  //访问到Vue实例
              console.log(this.$root.message);
            }
          }