單向資料流
阿新 • • 發佈：2018-11-21
子元件訪問父元件的資料
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>