您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

vue数据流是单向吗

2024/3/29 4:02:59发布4次查看
是单向的。虽然vue有双向绑定“v-model”,但是vue父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。
本教程操作环境:windows7系统、vue3版,dell g3电脑。
vue是单向数据流,数据流向是从上到下,从父组件传递到子组件的。
不要和vue的双向数据绑定搞混了;双向数据绑定说的是视图和模板之间的渲染关系,并不是数据的流向关系!
vue父子组件之间数据传递是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。
1,单向数据流:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,也将会改变父组件的状态。
2,prop是通过引用传入的:
注意在 javascript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
深入理解 vue 单向数据流1、v-model 用在 input 元素上v-model在使用的时候很像双向绑定的(实际上也是。。。),但是 vue 是单项数据流,v-model 只是语法糖而已:
<input v-model="something" /><input v-bind:value="something" v-on:input="something = $event.target.value" />
第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样:
<input :value="something" @input="something = $event.target.value" />
要理解这行代码,首先你要知道 input 元素本身有个 oninput 事件,这是 html5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 oninput ,通过 $event 把最新的 value 传递给 something。
我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论: 在给 input 元素添加 v-model 属性时,默认会把 value 作为元素的属性,然后把 'input' 事件作为实时传递 value 的触发事件
2、v-model 用在组件上v-model 不仅仅能在 input 上用,在组件上也能使用,拿官网上的demo看。
<currency-input v-model="price"></currency-input>vue.component('currency-input', { template: '\ <span>\ $\ <input\ ref="input"\ v-bind:value="value"\ v-on:input="updatevalue($event.target.value)"\ >\ </span>\ ', props: ['value'], // 为什么这里要用 value 属性,value在哪里定义的? methods: { // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制 updatevalue: function (value) { var formattedvalue = value // 删除两侧的空格符 .trim() // 保留 2 位小数 .slice( 0, value.indexof('.') === -1 ? value.length : value.indexof('.') + 3 ) // 如果值尚不合规,则手动覆盖为合规的值 if (formattedvalue !== value) { this.$refs.input.value = formattedvalue } // 通过 input 事件带出数值 // <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?--> this.$emit('input', number(formattedvalue)) } }})
如果你知道这两个问题的答案,那么恭喜你真正掌握了 v-model,如果你没明白,那么可以看下这段代码:
<currency-input v-model="price"></currency-input>所以在组件中使用时,它相当于下面的简写://上行代码是下行的语法糖<currency-input :value="price" @input="price = arguments[0]"></currency-input>
所以,给组件添加 v-model 属性时,默认会把 value 作为组件的属性,然后把 'input' 值作为给组件绑定事件时的事件名。这在写组件时特别有用。
3、v-model 的缺点和解决办法在创建类似复选框或者单选框的常见组件时,v-model就不好用了。
<input type="checkbox" v-model="something" />
v-model 给我们提供好了 value 属性和 oninput 事件,但是,我们需要的不是 value 属性,而是 checked 属性,并且当你点击这个单选框的时候不会触发 oninput 事件,它只会触发 onchange 事件。
因为 v-model 只是用到了 input 元素上,所以这种情况好解决:
<input type="checkbox" :checked="value" @change="change(value, $event)"
当 v-model 用到组件上时:
<checkbox v-model="value"></checkbox>vue.component('checkbox', { tempalte: '<input type="checkbox" @change="change" :checked="currentvalue"/>' props: ['value'], data: function () { return { //这里为什么要定义一个局部变量,并用 prop 的值初始化它。 currentvalue: this.value }; }, methods: { change: function ($event) { this.currentvalue = $event.target.checked; this.$emit('input', this.currentvalue); }})
在 vue 2.2 版本,你可以在定义组件时通过 model 选项的方式来定制 prop/event 。
4、vue 组件数据流从上面 v-model 的分析我们可以这么理解,双向数据绑定就是在单向绑定的基础上给可输入元素(input、textare等)添加了 change(input) 事件,来动态修改 model 和 view ,即通过触发($emit)父组件的事件来修改mv来达到 mvvm 的效果。而 vue 组件间传递数据是单向的,即数据总是由父组件传递到子组件,子组件在其内部可以有自己维护的数据,但它无权修改父组件传递给它的数据,当开发者尝试这样做的时候,vue 将会报错。这样做是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以    vue 不推荐子组件修改父组件的数据,直接修改 props 会抛出警告。流程图如下:
所以,当你想要在子组件去修改 props 时,把这个子组件当成父组件那样用,所以就有了
1、定义一个局部变量,并用 prop 的值初始化它。2、定义一个计算属性,处理 prop 的值并返回。【相关推荐:vuejs视频教程、web前端开发】
以上就是vue数据流是单向吗的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录