Day22——子组件访问父组件——$parent&$root

Android_la

于 2020-07-27 15:31:09 发布

阅读量111

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107612805

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. 子组件访问父组件

一. 回顾

前面学习了Day21——父组件访问子组件——children&refs，今天学习子组件访问父组件parent&root

二. 子组件访问父组件

这种情况很少用到，了解即可：

<body>
<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(){
                //访问父组件
                console.log(this.$parent);
                console.log(this.$parent.name);
                //访问根组件
                console.log(this.$root);
                console.log(this.$root.message);
              },
            },
          }
        }

      }
    }
  })
</script>
</body>