Vue父子元件通訊，props和自定義監聽
阿新 • • 發佈：2018-12-09
1.子元件通過props接收父元件中的值，插入子元件中會跟隨父元件而變化。（：x="num"）--->頁面中插入{{x}}
2.如果只想變接收過來的值，而不改變父元件的，則吧接收過來的值存一下。（newx:this.x）--->頁面中插入{{newx}}
3.子元件想修改父元件的值，需要新增事件，如下圖中的“tap”，父元件中，在引入子元件的地方監聽tap（@tap="callback"）
4.在父元件methds中寫callback（）{}函式。進行值的改變，或者其他操作即可
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../src/vue.js"></script> </head> <body> <div id="app"> <h2>父元件中</h2> <button @click="num=2">父元件中改變num</button> <p>父元件中的num:{{num}}</p> <childcom @tap="change" :x="num"></childcom> </div> <script> // 一個元件另一個元件的模板中使用，就成為前一個元件為子元件，後一個為父元件。 Vue.component('childcom',{ props:["x"], // 接收傳過來的x data(){ return { newx: this.x //把接受過來的x存起來，可以用來渲染和修改 } }, template: ` <div> <button @click="add">改變父元件的</button> <p>子元件從父元件拿過來的x:{{x}}</p> <p>子元件自己的newx:{{newx}}</p> </div> `, methods:{ add(){ // 通知父元件，改變n的值， 子元件中釋出事件出去 // tap 是自定義的事件名，將來父元件關心這個事件，就會監聽這個事件 this.$emit('tap',99) } } }); new Vue({ el: '#app', data:{ num:1 }, methods:{ change(n){ this.num = n; } } }) </script> </body> </html>