vue父子元件間通訊
阿新 • • 發佈:2019-01-06
父元件向子元件通訊
原理: 父元件data中存在一屬性,子元件通過props接收,父元件動態繫結該資料。
子元件程式碼:
<template> <div class="child"> <button>減一</button> {{number}} <button>加一</button> </div> </template> <script> export default { prop:['number'] //接收的資料,當存在props時,子元件將不再讀取自己data中的number資料。 data (){ return { number:12 } } } </script> <style scoped> .child { color: red; } </style>
父元件程式碼:
<template> <v-child v-bind:number="number"></v-child> //引用子元件,動態繫結資料 </div> </template> <script> import son from './components/child.vue'; //首先匯入子元件 export default { name: 'App', components: { 'v-child': son //定義子元件名稱 }, data () { return { number:123 //需要傳遞的資料。 } } }
子元件向父元件通訊
原理:
子元件通過this.$emit(‘方法名’,‘引數’)傳遞,
父元件通過 v-on:方法名=“function()”來接收。
子元件程式碼:
<template> <div class="child"> <button v-on:click="increase">減一</button> {{number}} <button>加一</button> </div> </template> <script> export default { props:['number'], data (){ return { numbers:12 } }, methods: { increase () { this.$emit('incre',1); //通過該方法與父元件通訊 } } } </script> <style scoped> .child { color: red; }
父元件程式碼:
<v-child v-bind:number="number" v-on:incre="jian"></v-child>
methods: {
jian(){
this.number--
}
}
邏輯就是:子元件點選按鈕觸發increase函式,然後執行該函式通過$emit()方法定義jian()傳遞出去,父元件通過v-on方法檢測到jian()並執行。導致父元件number變化,相應的子元件number也跟著變化。