【Vue】组件通信（子传父 $emit）

作者: 德育处主任 | 来源:发表于2019-01-12 20:51 被阅读0次

微信订阅号：Rabbit_svip

组件和组件之间是相互独立的。
如果父组件需要传值给子组件，可以看这里【Vue】组件通信（父传子 props）

本节主要讲解子组件传值给父组件。

主要用到的关键词是：$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'
})