最近在vue项目中有一个需求,就是我需要根据不同的类型在页面中放不同的组件,组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面代码会显得比较多,毕竟我当前页面已经7 - 800行代码了所以我需要把一些元素定义成组件,封装起来,所以就会遇到数据的传值绑定问题
首先我们来看看官方文档[https://cn.vuejs.org/v2/guide/components.html #同步-修饰符)
。同步修饰符所提供的功能。当一个子组件改变了一个道具的值时,这个变化也会同步到父组件中所绑定
就是说我们可以直接在我们需要传的道具后面加上.sync
比如我下面需要绑定,,p_model,然后我在他后面加上.sync
& lt; certificate-input
:p_model.sync=pname的祝辞
& lt;/certificate-input>
他会扩展成:
& lt; certificate-input: p_model=" pname " @update: p_model=" val=比;pname=val”祝辞& lt;/certificate-input>
父组件全部代码:
& lt; template>
& lt; div>
& lt; certificate-input
:p_model.sync=' pname '
祝辞:xi_model.sync=" xiname”;
& lt;/certificate-input>
& lt;/div>
& lt;/template>
从“. ./共同/CertificateInput.vue”进口CertificateInput
出口默认{
名称:“fathor”,
组件:{
CertificateInput
}，
数据(){
返回{
pname:“”,
xiname:“”
}
}
上面说了一大推父组件下面我们来看看子组件怎么写?
因为我项目中使用vux代码就直接复制过来改了一下
& lt; template>
& lt; div>
& lt;输入
title=靶彰?
v模型="名称"
祝辞& lt;/x-input>
& lt;输入title=吧矸葜ず拧?
v模型=熬烊松矸葜ぁ?
占位符="请输入身份证号”
required>
& lt;/x-input>
& lt;/div>
& lt;/template>
& lt;脚本type=" text/javascript祝辞
从“vux”进口{XInput}
出口默认{
名称:“certificateInput”,
道具:“p_model”、“xi_model”,
组件:{
XInput
}，
数据(){
返回{
名称:this.p_model,
经办人身份证:this.xi_model
}
}，
看:{
p_model (val) {
这一点。地址=val;
}，
名称(val) {//设置监听,如果改变就更新p_model
这一点。美元发出(更新:p_model, val)
}，
xi_model (val) {
这一点。证书=瓦尔
}，
经办人身份证(val) {
这一点。美元发出(更新:xi_model, val)
}
}
}
& lt;/script>
由上面可以看出,,子组件主要代码就是监听他的改变然后触发父组件监听的事件
名称(val) {//设置监听,如果改变就更新p_model
这一点。美元发出(更新:p_model, val)
}
好了上面就是我的方法
感觉写的好低
以后多多改善
以上所述是小编给大家介绍的Vue使用。同步实现父子组件的双向绑定数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
