这篇文章给大家分享的是有关vue指的是单项数据流还是双向数据流的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
vue是单项数据流。虽然vue有双向绑定“v-model”，但是vue父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
双向绑定
简而言之，双向绑定就是model的更新会触发view的更新，view的更新会触发model的更新，它们的作用是相互的
[图片上传失败...(image-81a06f-1556975918443)]
单向数据流
简而言之，单向数据流就是model的更新会触发view的更新，view的更新不会触发model的更新，它们的作用是单向的
这不是废话吗，谁都知道的
下面就是真正的干货了，板凳坐好
<ul>
<li>Vue是单向数据流，不是双向绑定</li>
<li>Vue的双向绑定不过是语法糖</li>
<li>Object.definePropert是用来做响应式更新的</li>
</ul>v-model的实现原理
放在组件上
父组件
<AnalysisSub v-model="phoneInfo" :zip-code.sync="zipCode" /子组件
<template>
<div>
<input
:value="phoneInfo.phone"
type="number"
placeholder="手机号"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
type="number"
placeholder="邮编"
@input="handleZipCodeChange"
/>
</div></template><script>export default {
name: "PersonalInfo",
model: {
prop: "phoneInfo", // 默认 value
event: "change" // 默认 input
},
props: {
phoneInfo: Object,
zipCode: String
},
methods: {
handlePhoneChange(e) {
this.$emit("change", {
...this.phoneInfo,
phone: e.target.value
});
},
handleZipCodeChange(e) {
this.$emit("update:zipCode", e.target.value);
}
}
};</script>父组件的写法等同于
<AnalysisSub :phone-info="phoneInfo" @change="val => (phoneInfo = val)"
:zip-code="zipCode" @update:zipCode="val => (zipCode = val)"/>放在input元素上
其实上文已经体现了
<input v-model=“phoneInfo.phone”/>
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"以上两句是相等的
TIPS
model 2.2.0+
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
.sync修饰符 2.3.0+
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
感谢各位的阅读！关于“vue指的是单项数据流还是双向数据流”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
