单向数据流
子組件訪問父組件的數據
props是單向綁定的，當父組件的屬性變化時，將傳導給子組件，但是不會反過來 而且不允許子組件直接修改父組件中的數據，報錯 解決方式：方式1：如果子組件想把它作為局部數據來使用，可以將數據存入另一個變量中再操作，不影響父組件中的數據方式2：如果子組件想修改數據并且同步更新到父組件，兩個方法：a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又開始支持）需要顯式地觸發一個更新事件b.可以將父組件中的數據包裝成對象，然后在子組件中修改對象的屬性(因為對象是引用類型，指向同一個內存空間)，推薦 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script></head><body> <div id="app"><h3>這是父組件</h3><input type="text" v-model="name">{{people.age}}<zizujian :name.sync="name" :agea="people"></zizujian> </div> <hr><template id="app1"><div><h3>這是子組件:{{username}}</h3><h2>{{username}}</h2><button @click="change">修改</button></div> </template></body><script> new Vue({el: "#app",data:{name:"這是父組件",people: {age:18}},components: {'zizujian':{props: ['name','agea'],data(){return {username: this.name}},template:'#app1',methods: {change: function () {// this.username="6666" 第一種// this.$emit('update:name',"修改完了") 第二種this.agea.age=34 第三種}}}} })</script> </html>轉載于:https://www.cnblogs.com/wspblog/p/9996578.html
總結
- 上一篇： 【thinkPHP框架】Failed o
- 下一篇： 鼠标有驱动不能用怎么办 解决鼠标驱动问题