vue_prop单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单项下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，如【例1】。这样会防止子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。

【例1】

<div id="app">father:<button @click="count++">{{ count }}</button><son-cmp :count='count'></son-cmp>
</div>

Vue.component('son-cmp', {props: ['count'],template: `<div>son:<button @click="count++">{{ count }}</button></div>`
})
const vm = new Vue({el: '#app',data: {count: 0}
})

【注】常见试图改变prop的情况

1. 用 prop 来传递一个初始值

这个子组件接下来希望将其作为一个本地的prop数据来使用，在后续操作中，会将这个值进行改变。在这种情况下，最好定义一个本地的data属性，并将这个prop用作其初始值

Vue.component('son-cmp', {props: ['count'],data() {return {myCount: 0}},template: `<div>son:<button @click="myCount++">{{ myCount }}</button></div>`
})
const vm = new Vue({el: '#app',data: {count: 0}
})

2. prop作为原始值传入且需要进行转换

在这种情况下，最好使用这个prop的值来定义一个计算属性

Vue.component('son-cmp', {props: ['count'],computed: {myCount() {return this.count + '万'}},template: `<div>son:<button>{{ myCount }}</button></div>
`
})
const vm = new Vue({el: '#app',data: {count: 0}
})

vue_prop单向数据流相关推荐

vue单向数据流与双向绑定两者区别
1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据,但是子组件不能直接修改父组件的状态. 2.数据的双向绑定主要由MVVM框架实现,主要由三部分组成View.ViewModel和 ...
05 state与setState、单向数据流
声明周期与组件卸载 props配置:使用组件时传入数据 state私有数据:组件内部使用的数据 state的使用注意事项必须使用setState方法来更改state 多个setState会合并调用 ...
android数据流分类,【Android工程之类】1 MVVM架构 - MVVM与单向数据流
前言这个系列将讲述使用MVVM架构.LiveData.Room.Kodein.Retrofit.EventBus来建立一个统一的.优雅的.可维护的TODO程序,本系列分为多个章节,从0开始一步一步引 ...
[vue] 说说你对单向数据流和双向数据流的理解
[vue] 说说你对单向数据流和双向数据流的理解单向数据流:所有状态的改变可记录.可跟踪,源头易追溯:所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性: ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
Vue 组件/ Prop单向数据流 / $emit自定义方法
组件基础全局注册组件 // 注册组件 Vue.component('cpt-name', {})// 使用 <cpt-name></cpt-name> 局部组件 // 注册局 ...
Vue单向数据流（不要修改props）
在使用Vue组件通信是经常会出现以下此类错误: 在vue中需要遵循单向数据流原则所以什么是单向数据流: 向单项数据流指的是,在父传子的前提下,父组件里面的数据发生改变会带动子组件里的数据进行更新. ...
Vue关于双向绑定和单向数据流的理解
很多接触Vue开发不久的同学会有疑问,vue既然是单向数据流为什么会有双向绑定一说? 关于Vue数据绑定首先引用官网原话: AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流.这 ...
怎么理解vue是单向数据流
在理解vue为什么是单向数据流之前,简单复习下prop, prop也就是父组件传过来的数据,如果我们试图通过子组件的v-model去改变这个prop,也就是试图通过子组件直接去改变父组件的数据,而不是 ...

vue_prop单向数据流

vue_prop单向数据流相关推荐

最新文章

热门文章