Vue - 父子组件的访问方式

最新推荐文章于 2022-12-02 21:29:45 发布

学习中的小菜鸟.

最新推荐文章于 2022-12-02 21:29:45 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/qq_33962481/article/details/119382613

版权

Vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

文章目录

一、父访问子
二、子访问父

一、父访问子

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

1. 使用$children

<body>
  <div id="app">
    <cpn></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: {
        score: 90,
      },
      methods: {
        btnClick() {
          console.log(this.$children[0].message); 
        }
      },
      components:{
        cpn: {
          template: "#cpn",
          data() {
            return {
              message: "我是子组件的message"
            }
          }
        }
      }
    })
  </script>
</body>

2. 使用$refs

$refs是一个对象类型, 默认是一个空对象
需要在子组件上面添加一个标记 ref="aaa"

<!-- 添加标记 -->
<cpn ref="aaa"></cpn>

使用

<body>
  <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 app = new Vue({
      el: "#app",
      data: {
        score: 90,
      },
      methods: {
        btnClick() {
          console.log(this.$refs.aaa.message); 
        }
      },
      components:{
        cpn: {
          template: "#cpn",
          data() {
            return {
              message: "我是子组件的message"
            }
          }
        }
      }
    })
  </script>
</body>

二、子访问父

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

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

  <template id="cpn">
    <button @click="btnClick">按钮</button>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "我是父组件的message",
      },
      components:{
        cpn: {
          template: "#cpn",
          methods: {
            btnClick() {
              console.log(this.$parent.message);
            }
          },
        }
      }
    })
  </script>
</body>

学习中的小菜鸟.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 父子组件的访问方式

文章目录一、父访问子1. 使用$children2. 使用$refs使用二、子访问父一、父访问子父组件访问子组件 : 使用$children或$refs1. 使用$children<body> <div id="app"> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template id="cpn"&g
复制链接

扫一扫