vue中父子元件的通訊
阿新 • • 發佈:2018-12-22
父元件:
<template>
<div class="parent">
<div>我是父元件,給子元件傳值(傳:我是父元件)----{{msg2}}</div>
<!--在子元件上v-on來監聽該事件,有變化則呼叫exportMsg方法-->
<transmit-child :child-msg="msg" v-on:clickMsg="exportMsg"></transmit-child>
</div>
</template>
<script >
import child from '@/components/child'
export default {
name: 'parent',
data () {
return {
arr: [1, 2, 3, 4],
msg: '我是父元件',
msg2: ''
}
},
components: {
'transmit-child': child
},
methods: {
exportMsg (childValue) {
console.log('fu')
this.msg2 = childValue
}
}
}
</script>
子元件:
<template>
<div class="child">
<div>我是子元件</div>
<div>{{childMsg}}</div>
<button @click="transmit">通過事件向父元件傳遞訊息</button>
</div>
</template>
<script>
export default {
name: 'child' ,
data () {
return {
msg: '我是子元件'
}
},
// props是元件的一個單獨選項,不能寫在data中
props: ['childMsg'],
methods: {
transmit () {
console.log('zi')
// 事件名稱('clickMsg')和需要傳遞給父元件的值(msg)
this.$emit('clickMsg', this.msg)
}
}
}
</script>
- 父元件傳遞資料給子元件。是通過子元件設定props選項中自定義屬性來接收來自父元件的資料。父元件中子元件的地方使用
v-bind:自定義屬性(該屬性必須為子元件的props的值)
父元件傳值則為v-bind:自定義屬性(該屬性必須為子元件的props的值)=‘父元件需要傳的值’
。 - 子元件通過事件觸發向父元件傳遞訊息。擷取子元件
methods
方法程式碼如下:
methods: {
transmit () {
console.log('zi')
// 事件名稱('clickMsg')和需要傳遞給父元件的值(msg)
this.$emit('clickMsg', this.msg)
}
}
點選子元件,執行transmit
方法,進而執行了this.$emit('clickMsg', this.msg)
方法。第一個引數為事件名稱,第二個引數為子元件中需要傳遞給父元件的值。在父元件中子元件的地方使用v-on:clickMsg="exportMsg"
來監聽子元件的事件觸發。一旦觸發,則會執行父元件中的exportMsg
方法,方法程式碼如下:
methods: {
exportMsg (childValue) {
console.log('fu')
this.msg2 = childValue
}
}
this.$emit('clickMsg', this.msg)
中的this.msg
會傳遞給childValue
進而達到傳值的目的。
注意:v-on:clickMsg="exportMsg "
方法後不要加括號,更不要寫括號裡還寫引數的形式。因為子元件一般是要傳值給父元件的,需要傳值,只在父元件的methods方法中定義方法時,寫帶引數的形式即可,子元件傳遞過來的值會傳給引數的。而在v-on:clickMsg="exportMsg "
方法後加括號,則必須寫傳給引數的值,而該值必須為父元件中已經定義的data中得值,這裡非常重要,雖可以這麼寫,但是,我們可以在方法中用this.
來引用data
中得值