• 欢迎光临~

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

开发技术 开发技术 2022-11-25 次浏览

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

父组件:

通过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>

 

程序员灯塔
转载请注明原文链接:vue父子组件通信之$refs传递数据
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com