Vue父子之間的值傳遞
將通過兩個input框實現父子之間的值傳遞作為演示，效果圖
先註冊父子各一個組件，程式碼如下
<div id="app"> <parent></parent> </div> <template id="parent"> <div> <input type="text" v-model="text" placeholder="parent"> <son></son> </div> </template> <template id="son"> <div> <input type="text" placeholder="son"> </div> </template>
new Vue({ el: "#app", components: { parent: { template: '#parent', data() { return { text: '' } }, components: { son: { template: '#son' } } } } })
一、父傳子
再父組件通過屬性傳遞值
<template id="parent">
<div>
<input type="text" v-model="text" placeholder="parent">
<son :text="text"></son>//通過屬性值傳遞
</div>
</template>
子組件通過props屬性接受
components: { son: { template: '#son', props:['text'] //通過props屬性接受父傳遞過來的值 } }
這樣我們就可以使用父組件傳遞過來的值了
<template id="son">
<div>
<input type="text" placeholder="son" :value="text">//使用父元素傳遞過來的值
</div>
</template>
看下現在的效果
父組件向子組件傳遞成功
二、子傳父
通過父組件自定義事件，然後子組件用$emit(event,aguments)調用
<template id="parent">
<div>
<input type="text" v-model="text" placeholder="parent">
<son :text="text" @ev="item"></son>//自定義事件
</div>
</template>
components: {
parent: {
template: '#parent',
data() {
return {
text: ''
}
},
components: {
son: {
template: '#son',
props: ['text']
}
},
methods: {
item(v) { //自定義事件觸發的方法
this.text = v //使用子組件傳遞過來的值改變this.text數據
}
}
}
}
再子組件觸發自定義事件
<template id="son">
<div>
<input type="text" placeholder="son" :value="text" @input="emit" ref="son">//觸發自定義事件
</div>
</template>
components: {
parent: {
template: '#parent',
data() {
return {
text: ''
}
},
components: {
son: {
template: '#son',
props: ['text'],
methods: {
emit() {
this.$emit('ev', this.$refs.son.value) //觸發自定義事件，並傳遞值
}
}
}
},
methods: {
item(v) {
this.text = v
}
}
}
}
這樣就完成了子傳父，父傳子，效果也完成了
