好资源导航 » 文章资讯 » Vue使用.sync 实现父子组件的双向绑定数据问题

Vue使用.sync 实现父子组件的双向绑定数据问题

2023-08-25 00:46:04 77

1.前言

最近在vue项目中有一个需求，就是我需要根据不同的类型在页面中放不同的组件，组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面代码会显得比较多，毕竟我当前页面已经7-800行代码了所以我需要把一些元素定义成组件，封装起来，所以就会遇到数据的传值绑定问题

2.父组件

首先我们来看看官方文档[https://cn.vuejs.org/v2/guide/components.html#sync-修饰符]

.sync修饰符所提供的功能。当一个子组件改变了一个prop的值时，这个变化也会同步到父组件中所绑定

就是说我们可以直接在我们需要传的prop后面加上.sync

比如我下面需要绑定 p_model,然后我在他后面加上.sync

他会扩展成：

pname=val">

父组件全部代码：


importCertificateInputfrom'../common/CertificateInput.vue'
exportdefault{
name:'fathor',
components:{
CertificateInput
},
data(){
return{
pname:"",
xiname:""
}
}

子组件

上面说了一大推父组件下面我们来看看子组件怎么写？

因为我项目中使用vux代码就直接复制过来改了一下



import{XInput}from'vux'
exportdefault{
name:'certificateInput',
props:["p_model","xi_model"],
components:{
XInput
},
data(){
return{
name:this.p_model,
idCard:this.xi_model
}
},
watch:{

p_model(val){
this.address=val;
},
name(val){
//设置监听，如果改变就更新p_model
this.$emit('update:p_model',val)
},
xi_model(val){
this.certificate=val
},
idCard(val){
this.$emit('update:xi_model',val)
}
}
}

由上面可以看出子组件主要代码就是监听他的改变然后触发父组件监听的事件

name(val){
//设置监听，如果改变就更新p_model
this.$emit('update:p_model',val)
}

好了上面就是我的方法

感觉写的好low

以后多多改善

总结

以上所述是小编给大家介绍的Vue使用.sync实现父子组件的双向绑定数据问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

Vue使用.sync 实现父子组件的双向绑定数据问题

热门推荐

随机推荐