自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-09-23 18:16 vue.js  javascript  ecmascript  

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

方式

  1. 父组件传递数据给子组件:

    • 使用 props。

  2. 子组件通知父组件:

    • 使用 $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>

功能说明

  • 父组件: 显示一条消息，并将其传递给子组件。
  • 子组件: 接收父组件的消息，并提供一个按钮，点击后通过 $emit 触发事件，将消息传回父组件。
  • 事件处理: 父组件处理子组件的事件，弹出一个提示框显示消息。

原文地址：https://blog.csdn.net/lf_1234/article/details/142382290

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024