vue支持双向数据流吗?
除了最开始angularJs支持数据的双向流动之外,vue和react是均不支持的。vue之所以被常说双向数据流,其实是错误的。是因为它是双向绑定被有些人理解为双向数据流。
vue的单向数据流是指:父组件中的数据可以通过props流动到子组件中,并且当父组件中的数据发生改变的时候,子组件会自动接收到这个修改后的数据,并且更新页面中的内容。
props是只读的,如果修改props里的值会报错。
但是vue检测props只能检测基本类型的值,而对于复合类型(即对象),只能检测引用地址有没有变化,而属性值变化,不会被检测到。
利用.sync来支持双向数据流
vue2提供一个.sync修饰符来实现‘双向数据流。
具体见’https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
// 父组件
<Son :msg.sync="message"></Son>
...
data() {
return {
message: "标题",
}
}
//子组件
<span>{{ msg }}</span>
<button @click = 'change'></button>
...
methods: {
change() {
this.$emit("update:msg", "标题改变了!")
}
}