vue如何在父組件中調用子組件的方法

本文轉載自查看原文 2019-11-18 18:28 2260

 父組件
 1 <template>
 2   <div>
 3         <child ref="mychild"></child>
 4          <button @click="parentSetVal("這是新值")">點擊</button>     
 5   </div>
 6 </template>
 7 <script>
 8 import child from "./child"
 9 exprot default(){
10     components:{
11         child 
12     },
13     methods:{
14         parentSetVal(val){
15             this.$refs.mychild.setVal(val)
16         }
17     }
18 }
19 </script>

 子組件
 1 <template>
 2    <div>
 3           <p>{{val}}</p>
 4           <button @click="setVal("這是值2")">點擊</button>     
 5    </div>
 6  </template>
 7 <script>
 8  exprot default(){
 9      data(){
10                return {
11                     val:"這是值1"
12                }
13           },
14      methods:{
15         setVal(val){
16             this.val(val);
17         }
18      }
19  }
20  </script>

要點:
1.子組件需要已注冊；
2.<child ref="myChild"></child>中mychild是子在父中的名字；
3.通過this.$refs.myChild.setVal()調用子組件的方法；

參考：https://www.cnblogs.com/gitByLegend/p/10868538.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件之間的通信以及如何在父組件中調用子組件的方法和屬性 Vue3.0：如何在父組件中調用ref的子組件方法關於Vue中，父組件獲取子組件的數據（子組件調用父組件函數）的方法 Vue 父組件調用子組件的方法 Vue 子組件調用父組件的方法 vue父組件調用子組件的方法 vue 父組件調用子組件的方法 Vue 父組件調用子組件的方法 Vue子組件調用父組件的方法 vue 父組件調用子組件的方法