32.父子组件的访问方式

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

• 32.父子组件的访问方式
  • 1.父组件访问子组件: children 或 refs(常用)
  • 2.子组件访问父组件: $parent(用的少)
  • 3.子组件访问根组件: $root

1.父组件访问子组件: children 或 refs(常用)

<div id="app">
  <cpn ref="xc"></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>我是子组件</div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        // 获取子组件的方法  不建议使用
        this.$children[0].showMessage()
        // 获取子组件的属性
        console.log(this.$children[0].name)

        // 常用  refs  ⭐⭐⭐
        console.log(this.$refs.xc.name)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是子组件的name'
          }
        },
        methods: {
          showMessage() {
            console.log('showMessage');
          }
        }
      },
    }
  })
</script>

2.子组件访问父组件: $parent(用的少)

<div id="app">
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是cpn组件</h2>
    <ccpn></ccpn>
  </div>
</template>

<template id="ccpn">
  <div>
    <h2>我是子组件</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是cpn组件的name'
          }
        },
        components: {
          ccpn: {
            template: '#ccpn',
            methods: {
              btnClick() {
                // 1.访问父组件$parent
                // console.log(this.$parent);
                // console.log(this.$parent.name);

                // 2.访问根组件$root
                console.log(this.$root);
                console.log(this.$root.message);
              }
            }
          }
        }
      }
    }
  })
</script>

3.子组件访问根组件: $root

// 访问根组件$root
console.log(this.$root);
console.log(this.$root.message);