Vue组件之单向数据流的解决方法
更新时间：2018年11月10日 12:58:34 作者：初心鸿鹄
这篇文章主要介绍了Vue组件之单向数据流的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
子组件能够通过自身的props选项获取父组件上的数据，但是在默认情况下，props是单向绑定的---当父组件数据（属性）发生变化的时候会传递给子组件，引起子组件的变化，但不能反过来并且不允许子组件直接改变父组件的数据，会报错的。例如：
也就是说当通过一种方法改变父组件数据的时候，子组件与之相关联的props数据也会发生改变，从而影响子组件，但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据。也就是说一般情况下只能是“父影响子，而不是子影响父”。
两种情况：
1.如果子组件想将从父组件获得的数据作为局部数据来使用，可以将其给保存到子组件的局部变量data中（子组件中的变量），不影响父组件的数据；例如：
data:function(){
return {
weather:{
tempre:"22.3℃",
weth:"rain",
wind:this.ser
}
}
},
这里的this.sers就是来源于子组件的props数据。
2.如果子组件想修改数据并且同步更新到父组件，两种解决方式
第一种：使用.sync加上显式触发的一个事件this.$emit("update:你要更改的props数据", 改变后的值)，也就是在一个事件触发的函数中通过this.$emit("update:你要更改的props数据", 改变后的值)来改变数据；例如：
HTML部分
<div id= "container" v-cloak>
<my-compon></my-compon>
</div>
<!-- 父组件模板 -->
<template id="myComp">
<div>
<h3>大家好，我是{{animal.name}}猫，我已经和Jerry斗争了{{animal.age}}年了</h3>
给绑定的数据使用.sync修饰符
<my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son>
</div>
</template>
<!-- 子组件模板 -->
<template id="myCompSon">
<div>
<h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
<h3>今天的天气：{{weather.weth}},风力{{weather.wind}},温度{{weather.tempre}},{{animalname}},{{animalage}}</h3>
<button @click = "changeFatDaAge">点击父组件中的数据会跟着改变方式一</button>
</div>
</template>
JS部分
var app = new Vue({
el:"#container",
data:{
house:{
date:"2017-10-10",
area:"144m²",
floor:6,
},
carBrand:"Benzi"
},
components:{
"my-compon":{//父组件
template:"#myComp",
data:function(){
return {
animal:{
name:"Tom",
age:3,
skin:"black"
},
shoe:"鸿星尔克",
dog:{
hair:"brown",
height:1.25
}
}
},
methods: {
changeData:function () {//这里的this指的是当前父组件的实例
this.animal.name = "Kitty"//改变父组件中的数据
}
},
components:{
"my-comp-son":{//子组件
template:"#myCompSon",
props:["animalname","animalage","dog"],//地位和data一样，获取方式也是一样
data:function(){
return {
weather:{
tempre:"22.3℃",
weth:"rain",
wind:"3级"
}
}
},
methods:{
// 给v-bind使用修饰符.sync,需要显式地触发一个更新事件（this.$emit("update:你要更改的props数据", 改变后的值)）
changeFatDaAge:function(){
// this.animalage = 19;
this.$emit("update:animalage", 19)//通过这个方法来改变子组件props数据，并引起父组件相应数据的改变
}
}
}
}
}
}
})
当点击按钮的时候父组件上的原始数据也会发生改变，不过这种方式不常用，写法也太麻烦，不建议使用；
第二种：将父组件的数据包装成对象并绑定到子组件上，在子组件中修改对象的属性（其实并没有真正改变该对象，因为对象是引用类型的数据，虽然属性发生了变化，但指针并没有发生变化），常用。例如：
HTML部分：
<div id= "container" v-cloak>
<my-compon></my-compon>
</div>
<!-- 父组件模板 -->
<template id="myComp">
<div>
<h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
<!-- 将父组件的数据包装成对象并绑定到子组件上，在子组件中修改对象的属性，在这是dog -->
<my-comp-son :dog = "dog"></my-comp-son>
</div>
</template>
<!-- 子组件模板 -->
<template id="myCompSon">
<div>
<h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
<button @click="changeFondata">点击父组件中的数据会跟着改变方式二</button>
</div>
</template>
JS部分
var app = new Vue({
el:"#container",
data:{
house:{
date:"2017-10-10",
area:"144m²",
floor:6,
},
carBrand:"Benzi"
},
components:{
"my-compon":{//父组件
template:"#myComp",
data:function(){
return {
animal:{
name:"Tom",
age:3,
skin:"black"
},
shoe:"鸿星尔克",
dog:{
hair:"brown",
height:1.25
}
}
},
methods: {
changeData:function () {//这里的this指的是当前父组件的实例
this.animal.name = "Kitty"//改变父组件中的数据
}
},
components:{
"my-comp-son":{//子组件
template:"#myCompSon",
props:["animalname","animalage","dog"],//地位和data一样，获取方式也是一样
data:function(){
return {
weather:{
tempre:"22.3℃",
weth:"rain",
wind:"3级"
}
}
},
methods:{
//在子组件中修改对象的属性
changeFondata:function(){
this.dog.hair = "红"
}
}
}
}
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue弹出框组件封装，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
这篇文章主要介绍了在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本篇文章主要介绍了详解Vue应用部署到服务器的正确方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
解决vue中el-date-picker type=daterange日期不回显的问题
这篇文章主要介绍了解决vue中el-date-picker type=daterange日期不回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue限制输入框只能输入8位整数和2位小数，文中我们使用v-model加watch 实现这一个功能,代码简单易懂，需要的朋友可以参考下2019-11-11
Vue 3 引入了一个全新的响应式系统,其中最核心的就是 reactive 和 ref,它们是实现响应式数据的基础,用于创建可以自动跟踪变化并更新视图的对象和变量,本文介绍了Vue3获取响应式数据的四种方法,需要的朋友可以参考下2024-08-08
今天小编就为大家分享一篇使用vue点击li,获取当前点击li父辈元素的属性值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章给大家介绍了vue3中form对象无法赋值的问题解决,有时候对象的值死活赋不上值,这时候可以看下赋值的对象变量名是否和页面组件中的ref相同,文中给出了代码示例供大家参考,需要的朋友可以参考下2024-01-01
最新评论