微信訂閱號:Rabbit_svip
組件和組件之間是相互獨立的脊串。
如果父組件需要傳值給子組件,可以看這里 【Vue】組件通信(父傳子 props)
本節(jié)主要講解 子組件 傳值給 父組件阱持。
主要用到的關鍵詞是:$emit
HTML代碼
<div id="app">
<parent></parent>
</div>
JS代碼
Vue.component('parent', {
template: `
<div>
<child @show-txt="show"></child>
<div v-if="name"> name: {{ name }} </div>
<div v-if="age"> age: {{ age }}</div>
</div>
`,
data() {
return {
name: '',
age: ''
}
},
methods: {
show(data) {
this.name = data.name;
this.age = data.age;
}
}
});
Vue.component('child', {
template: ` <button @click="on_click">btn</button>
`,
methods: {
on_click() {
this.$emit('show-txt', {name: 'Rabbit', age: 18})
}
}
});
new Vue({
el: '#app'
})
微信訂閱號:Rabbit_svip
微信訂閱號:Rabbit_svip