[JavaScript知识库] vue组件访问 -父访问子-$children、$refs -子访问父-$parent、$root

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue组件访问 -父访问子-$children、$refs -子访问父-$parent、$root -> 正文阅读

[JavaScript知识库]vue组件访问 -父访问子-$children、$refs -子访问父-$parent、$root

父访问子- $c h i l d r e n 、$ refs
子访问父- $p a r e n t 、$ root
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父访问子</title>
</head>
<body>
<div id="app">
<!--  {{message}}-->
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick1">我是父组件按钮</button>
</div>
<template id="cpn">
  <div>
    我是子组件
    <button @click="btnClick2">我是子组件按钮</button>
  </div>

</template>
<script src="../js/vue.js"></script>
<script>
  //父组件
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      name: '我是父组件的name'
    },
    methods:{
      btnClick1() {
        //1.$children
        console.log(this.$children);
        for(let c of this.$children){
          console.log(c.name);
          c.showMessage();
        }
        //2.$refs:对象类型，默认为空对象
        console.log(this.$refs.aaa.name+'$refs');
      }
    },
    // 局部注册
    components:{
      cpn:{  //子组件
        template:'#cpn',
        data(){
          return {
            name:'我是子组件的name'
          }
        },
        methods:{
          showMessage(){
            console.log('showMessage');
          },
          btnClick2() {
            // 1.$parent
            console.log(this.$parent);
            console.log(this.$parent.name);
            // 2.$root
            console.log(this.$root);
          }
        }
      }
    }
  })
</script>
</body>
</html>