微信訂閱號(hào)：Rabbit_svip

組件和組件之間是相互獨(dú)立的。
如果父組件需要傳值給子組件，可以看這里 【Vue】組件通信（父?jìng)髯?props）

本節(jié)主要講解 子組件 傳值給 父組件。

主要用到的關(guān)鍵詞是：$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'
})

微信訂閱號(hào)：Rabbit_svip

微信訂閱號(hào)：Rabbit_svip