Vue method how to call sub-components in the parent assembly

 父组件
 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>    

Subassembly 
. 1 <Template>
 2     <div>
 . 3            <P> {{Val}} </ P>
 . 4            <Button @ the Click = "setval (" This is the value 2 ")"> Click </ Button>     
 . 5     </ div >
 . 6   </ Template>
 . 7 <Script>
 . 8   exprot default () {
 . 9       Data () {
 10                 return {
 . 11                      Val: "this is the value. 1"
 12 is                 }
 13 is            },
 14       Methods: {
 15          setval (Val) {
 16              the this .val (val);
17         }
18      }
19  }
20  </script> 

Important:
1. subassembly need registered;
2. <REF = Child "myChild"> </ Child> in mychild is the parent of the child name;
3. Call subassembly by this $ refs.myChild.setVal (). Methods;

 

 

Reference: https://www.cnblogs.com/gitByLegend/p/10868538.html