vue父元件調用子元件中的屬性和方法

接上篇，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>      

部落客：測試生财（一個不為996而996的測開碼農）

座右銘：專注測試開發與自動化運維，努力讀書思考寫作，為内卷的人生奠定财務自由。

内容範疇：技術提升，職場雜談，事業發展，閱讀寫作，投資理财，健康人生。

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

部落格園：https://www.cnblogs.com/qa-freeroad/

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

微信公衆号：測試生财（定期分享獨家内容和資源）