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

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

父组件：

通过ref识别  ref="spcardform"

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

this.$refs.spcardform.msg

<template>
......
<SPcardform v-show="num === 'video'" ref="spcardform"></SPcardform>
......
</template>

<script>
import SPcardform from '@/views/SPcardform';
export default{
......
    components: {
        SPcardform
      },
......
    methods: {
        getData(){
            console.log(this.$refs.spcardform.msg)
        }
    }
}

子组件：

SPcardform.vue

<template>
......
</template>

<script>
export default {
    data(){
      return{
        msg:'我是msg',
        }
    },
    ......
}
</script>