vue父子组件通信之$refs传递数据

要做几个模板，每个模板的代码放在了子组件里，但是提交时需要子组件里的数据。

父组件：

通过ref识别  ref="spcardform"

使用时直接调用所需要的数据，需要子组件中的msg，则写成：

this.$refs.spcardform.msg

 1 <template>
 2 ......
 3 <SPcardform v-show="num === 'video'" ref="spcardform"></SPcardform>
 4 ......
 5 </template>
 6 
 7 <script>
 8 import SPcardform from '@/views/SPcardform';
 9 export default{
10 ......
11     components: {
12         SPcardform
13       },
14 ......
15     methods: {
16         getData(){
17             console.log(this.$refs.spcardform.msg)
18         }
19     }
20 }

子组件：

SPcardform.vue

 1 <template>
 2 ......
 3 </template>
 4 
 5 <script>
 6 export default {
 7     data(){
 8       return{
 9         msg:'我是msg',
10         }
11     },
12     ......
13 }
14 </script>