这篇文章将为大家详细讲解有关Vue中如何实现父子组件数据双向绑定，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
实现思路：
父 向 子 组件传值：使用 props 属性。( props 是property[属性] 的复数简写 )
子 向 父 组件传值：使用自定义事件。
父向子组件传值，子组件接收到数据之后，保存到自己的变量中。
计算
安全
数据库
网络和加速
企业服务
//父组件写法
<cld :numP="num" ></cld>
//子组件定义以及数据
components:{
cld:{
template:'#child',
props:{
numP:Number
},
}
}
//子组件内容
<template id="child">
<div>
{{ numP }}
</div>
</template>props 用于接收父组件传过来的值，props 的写法有很多种，具体如：
//方式1 ： 直接接收数据
props: [ 'numP' ]
//方式2： 加类型限制
props: [
numP: Number
]
//方式3：添加默认值
props: [
numP: {
type:Number,
default:0
}
]
//方式4：是否必须值限制
props: [
numP: {
type:Number,
default:0,
require:true //添加必须值，不传此值会报错
}
]
//方式5：采用对象形式
props: {
numP: {
type:Number,
default:0,
}
}子向父组件传值，主要通过自定义事件进行传值，具体实例如下：
// 父组件内容
<div>
子组件获取到的数据{{getNum}}
<cld :numb="num" @accept="getNumC"></cld>
</div>
//父组件方法
methods:{
getNumC(data){
this.getNum = data //接收子组件传的数据
}
},
//子组件定义
components:{
cld:{
template:'#child',
data(){
return{
numC:1314 //子组件数据定义
}
},
mounted(){
this.$emit( 'accept' , this.numC ) // 触发自定义事件
}
}
},Vue 的数据都是单向流动的，而且 vue 中从来就没有任何的双向绑定，v-model 实现的双向绑定只是语法糖而已。
方式1：利用 watch 实现父子组件的数据双向绑定，具体实例如下：
<div id="app">
数据<br>{{num}}
<input type="text" v-model="num"><br>
<cld :numb="num" @accept="getNumC"></cld>
</div>
//子组件内容
<template id="child">
<div>
数据<br>{{childNum}}
<input type="text" v-model="childNum" />
</div>
</template>
<!-- 父子组件通信 -->
const app = new Vue({
el:'#app',
data:{
num:'520',
},
methods:{
getNumC(data){
this.num = data
}
},
components:{
cld:{
template:'#child',
props:{
numb:String
},
data(){
return{
childNum:0,
}
},
watch:{
numb:function(){
this.childNum = this.numb
},
childNum:function(){
this.$emit('accept',this.childNum)
}
},
mounted(){
this.childNum = this.numb
}
}
}
})方式2：.sync 修饰符实现双向绑定
在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。(数据自上而下流，事件自下而上走)
<cld :numb.sync="num" ></cld>
//会扩展为：
<cld :numb="bar" @update:numb=”val => bar = val”/>当组件需要更新 numb 的值时，需要触发更新事件：
this.$emit("update:numb", newValue );使用具体实例如下：
// 父组件
<Father :foo.sync="foo"></Father>
//子组件
props: ['foo'],
data() {
return {
newFoo: this.foo;
}
},
methods:{
add:function(){
this.newMsg=10;
this.$emit('update:foo',this.newFoo);
}
}关于“Vue中如何实现父子组件数据双向绑定”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
