vue的单项数据流
-
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
-
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
-
如果是一个对象或者数组，那么当子组件改变时，也会影响到父组件；是由于是同一个空间地址的原因；（破坏了单项数据流）
上个例子说明一下
<div id="app">
<div @click="fn">{{msg}}</div>
<son :m="msg"></son>
</div>
let vm = new Vue({
el:"#app",
data: {
msg:"hello"
},
methods:{
fn(){
this.msg = "hahaha"
}
},
components:{
son:{
data(){
return {}
},
props:["m"],
// props : 会把这个属性放到当前的组件的实例的属性上；
// 通过props传递过来的数据也具有响应式；但是不能再次传递父组件；
template:"<div @click='fn'>{{m}}</div>",
methods:{
fn(){
// 在组件的函数或者事件中，那么函数中的this指向了当前组件的实例；
console.log(this);
console.log(this.m);
this.m = "world";
}
}
}
}
});
以上代码虽然能够实现子组件的数据更改父组件的数据，但是这样做控制台会发出警告：
image.png
并且做出了正确的提示
使用data属性或者computed属性接收一下这个prop的值，然后在做响应的改变，并且不能和prop的值重名，像这样：
props: ['m'],
data: function () {
return {
counter: this.m
}
}
或者这样
props: ['m'],
computed: {
mc: function () {
return this.m.trim().toLowerCase()//这里做对于prop的值的一些处理
}
}
最后的效果是，子组件中能够随意使用prop的值，又不会改变父级的数据，应为用data或者computed做了一层拦截
let vm = new Vue({
el:"#app",
data: {
msg:"hello"
},
methods:{
fn(){
this.msg = "hahaha"
}
},
components:{
son:{
data(){
return {con:this.m}
},
props:["m"],
// props : 会把这个属性放到当前的组件的实例的属性上；
// 通过props传递过来的数据也具有响应式；但是不能再次传递父组件；
template:"<div @click='fn'>{{m}}<br>{{con}}</div>",
methods:{
fn(){
// 在组件的函数或者事件中，那么函数中的this指向了当前组件的实例；
console.log(this.m);
this.con = "world";
console.log(this.con)
}
}
}
}
});
sync修饰符实现父子组件数据的双向绑定
- 父组件的数据改变影响子组件数据，子组件数据改变影响父组件数据，本质上父传子数据用的props，子传父数据用的是发布订阅
上个例子：
<div id="app">
{{money}}
<!--绑定自定义事件的过程，就是订阅的过程；-->
<!--叫发布订阅的语法糖：简写-->
<!--<child v-bind:m="money" v-on:update:m="money=$event"></child>-->
<child :m.sync="money"></child>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
money : 400
},
components:{
child:{
data(){
return {}
},
props:["m"],
template:"<div>{{m}}<button @click='fn'>改变数据</button></div>",
methods:{
fn(){
// 希望在fn执行时，触发父组件身上的change方法；
this.$emit("update:m",888)
}
}
}
}
});
</script>
- 子组件中不操作props属性，而是直接$emit事件和数据，直接改变父组件的数据
<child v-bind:m="money" v-on:update:m="money=$event"></child>
$event是子组件$emit 发布的数据888
<child :m.sync="money"></child>
.sync只是update的简写的一个语法糖
网友评论