Vue组件通信与访问：$children、$refs、$parent及$root的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/KEY2018/article/details/116432697

父组件访问子组件 el作用范围内必须有子组件注册的标签存在

this.$children 不建议使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 @click="dianji">{{fmessage}}</h1>
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h1>{{cmessage}}</h1>
      </div>
    </template>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        fmessage: "父组件信息",
      },
      methods: {
        dianji() {
          console.log(this.$children[0].cmessage);
        },
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              cmessage: "子组件信息",
            };
          },
        },
      },
    });
  </script>
</html>

this.$refs 需要给要访问的子组件创建的标签添加ref=" "属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 @click="dianji">{{fmessage}}</h1>
      <cpn ref="a"></cpn>
    </div>
    <template id="cpn">
      <div>
        <h1>{{cmessage}}</h1>
      </div>
    </template>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        fmessage: "父组件信息",
      },
      methods: {
        dianji() {
          console.log(this.$refs.a.cmessage);
        },
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              cmessage: "子组件信息",
            };
          },
        },
      },
    });
  </script>
</html>

子组件访问父组件

this.$parent

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h1 @click="dianji">{{cmessage}}</h1>
      </div>
    </template>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        fmessage: "父组件信息",
      },

      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              cmessage: "子组件信息",
            };
          },
          methods: {
            dianji() {
              console.log(this.$parent.fmessage);
            },
          },
        },
      },
    });
  </script>
</html>

this.$root 如果是多个组件多层嵌套时就是访问根组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h1 @click="dianji">{{cmessage}}</h1>
      </div>
    </template>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        fmessage: "父组件信息",
      },

      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              cmessage: "子组件信息",
            };
          },
          methods: {
            dianji() {
              console.log(this.$root.fmessage);
            },
          },
        },
      },
    });
  </script>
</html>