当前位置：首页 > article >正文

Vue.js props 子组件可以从父组件接收数据（通过 props）并可以向父组件发送事件（通过 $emit）

article 2024/12/25 1:38:06

父子组件之间可以通过事件和 props 进行通信，但通常是单向的：父组件向子组件传递数据（props），子组件向父组件发送事件（$emit）。

方式

父组件传递数据给子组件:
- 使用 props。
子组件通知父组件:
- 使用 $emit 发送事件。

示例

父组件:

Vue.component('parent', {
    data() {
        return {
            message: 'Hello from Parent!'
        };
    },
    template: `<child @child-event="handleChildEvent" :message="message"></child>`,
    methods: {
        handleChildEvent(data) {
            console.log(data); // 处理子组件传来的数据
        }
    }
});

子组件:

Vue.component('child', {
    props: ['message'],
    template: `<div>
        <p>{{ message }}</p>
        <button @click="notifyParent">Notify Parent</button>
    </div>`,
    methods: {
        notifyParent() {
            this.$emit('child-event', 'Message from Child!');
        }
    }
});

下面是一个简单的 Vue.js 示例，展示父子组件之间的交互：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件示例</title>
</head>
<body>

<div id="app">
    <parent-component></parent-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 子组件
    Vue.component('child-component', {
        props: ['message'],
        template: `
            <div>
                <p>子组件消息: {{ message }}</p>
                <button @click="notifyParent">通知父组件</button>
            </div>
        `,
        methods: {
            notifyParent() {
                this.$emit('child-event', '来自子组件的消息！');
            }
        }
    });

    // 父组件
    Vue.component('parent-component', {
        data() {
            return {
                parentMessage: '来自父组件的消息！'
            };
        },
        template: `
            <div>
                <h1>父组件</h1>
                <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
            </div>
        `,
        methods: {
            handleChildEvent(data) {
                alert(data); // 弹出子组件发送的消息
            }
        }
    });

    // 创建 Vue 实例
    new Vue({
        el: '#app'
    });
</script>

</body>
</html>