vue如何在父组件中调用子组件的方法

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