什么叫单向数据流？
官方解释
- prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
- 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
个人理解：所谓单向数据流就是父组件的变量，子组件不能直接去修改它，而是通过迂回战术在父组件传递给子组件的数据通过data或者计算属性方式传递给子组件，子组件去改变这个新的变量对象，然后在子组件渲染这个新的变量对象，实际这个时候最开始的父组件变量并没有改变，也就是说改变的是一个新的变量并且是子组件内部改变了，如果你确实想把父组件最开始的变量改变。那么你就需要在父组件身上绑定自定义事件。在子组件发生交互（例如点击）后去触发监控父组件身上的自定义事件从而改变父组件的最开始的变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="./vue.js"></script> </head> <body> <div id="app"> <h3>父组件中使用了count</h3> <p>{{count}}</p> <custom-component :count="count" @increment-click="countHandle"></custom-component> </div> <script> Vue.component('custom-component',{ props:{ count:{ validator:function (value){ return value > 10 } } }, data(){ return { incrementCount:this.count //作为局部这个组件的data的初始值 } }, computed:{ incrementCount2(){ return this.incrementCount } }, template:` <div> <h2>我是一个自定义的组件</h2> <input type="button" value="改变count的值" @click="changeCount(19940319)" /> {{incrementCount2}} </div> `, methods:{ changeCount(ddd){ this.incrementCount++; //通知父组件 发生了改变 this.$emit("increment-click",ddd) } } }) new Vue({ el:"#app", data:{ count:20 }, methods:{ countHandle(ddd){ //alert("子组件点击了"); this.count++; console.log(ddd) } } }) </script> </body> </html> |
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(8)
打赏
标签：
单向数据流 
感受学习的力量！