vue父组件调用子组件中的属性和方法

转载已于 2024-02-26 14:51:59 修改 · 246 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.51cto.com/u_14900374/2550173

文章标签：

#vue.js #javascript #前端

于 2024-02-26 14:22:21 首次发布

本文介绍了在Vue中如何通过父组件的`ref`属性来访问和操作子组件的属性和方法，以实现父子组件间的有效通信。作者通过示例展示了如何在子组件`Sub1.vue`中设置`title`和`run`方法，并在父组件`app.vue`中调用这些属性和方法。

本文转自: https://blog.51cto.com/u_14900374/2550173

在这里插入图片描述

获取方法
1、父组件中使用子组件的时候在给子组件定义一个ref属性

2、父组件可以通过this.$refs.XXX，来操作子组件中的属性和方法

子组件Sub1.vue

<template>
     <module :title="title" />
     <button :click="run()"></button>   
</template>
<script>　　
export  {
          name: "Sub1",
          data() {                 {
　　　　　　　　　　　//父组件可以通过定义的ref调用到title
                  title: ''
             }
          } ,
          methods {
              run() {                   
                   console.log("sub1");             
              }
         }
    }
</script>

父组件

<template>
     <!--这里使用子组件的时候定义一个ref属性1-->
     <sub1 ="sub"/>
     <button @click="callChild()"></button>
</template>
<script>
export  {
       name: 'app',
       data() {              {
           　　　　title : 'test' 
      　　   }
       },
       methods {
             callChild() {
　　　　　　　　　　　　//这里就可以使用到子组件里面的title属性
                    console.log(this.$refs.title)
　　　　　　　　　　　　//这样可以使用到子组件的方法
                    this.$ref.run();
             }
       }, 
      components: {
      　　　　Sub1       
       }
}
</script>