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

2020-11-13 08:34:27 阅读：340 来源： 互联网

接上篇，vue的父组件向子组件获取值，如果父组件需要主动调用子组件中的属性方法该如何实现？

获取方法

1、父组件中使用子组件的时候在给子组件定义一个ref属性 2、父组件可以通过this.$refs.XXX，来操作子组件中的属性和方法

子组件Sub1.vue

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

父组件

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

博主：测试生财

座右铭：专注测试与自动化，致力提高研发效能；通过测试精进完成原始积累，通过读书理财奔向财务自由。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

标签：vue,title,Sub1,调用,组件,ref,属性
来源： https://www.cnblogs.com/qa-freeroad/p/13869720.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

获取方法

子组件Sub1.vue

父组件