Vue组件通信父子传值：子向父传，绑定自定义事件，使用$emit触发

最新推荐文章于 2022-11-17 11:00:46 发布

每一天，每一步

最新推荐文章于 2022-11-17 11:00:46 发布

阅读量236

点赞数

分类专栏： Vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/u010234868/article/details/120071092

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

这篇博客介绍了Vue.js中父子组件（Parent-Child）及子父组件（Child-Parent）之间的数据通信。通过绑定自定义属性和事件，展示了如何在Parent组件中传递数据给Child组件，以及Child组件如何通过触发自定义事件将数据回传给Parent。示例代码详细解释了props和$emit的使用方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // Parent -> Child
        // 在Parent组件引用的子组件中绑定自定义属性
        // Child组件使用props接收Parent组件传递的数据
        // 可以在Child组件中任意使用

        // Child -> Parent
        // 在Parent组件引用的子组件中绑定自定义事件
        // Child组件中触发原生事件@input，在函数中使用$emit触发自定义事件@clickHandler

        Vue.component('Parent', {
            data() {
                return {
                    msg: 'Parent data'
                }
            },
            template: `
                <div>
                    <p>Parent组件</p>
                    <Child :childData="msg" @clickHandler="clickHandler" />
                </div>
            `,
            methods: {
                clickHandler(val) {
                    console.log(val);
                }
            }
        });
        Vue.component('Child', {
            data() {
                return {
                    child: this.childData  // props中的属性最好避免改动，在这里新定义相应的属性来接收props中的属性；
                    // 否则报警告：vue.js:634 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever t
                }
            },
            props: ['childData'],
            template: `
                <div>
                    <p>Child组件</p>
                    <!-- <input type="text" v-model="childData" @input="changeValue(childData)"> -->
                    <input type="text" v-model="child" @input="changeValue(child)">
                </div>
            `,
            methods: {
                changeValue(val) {
                    // $emit(自定义事件名, 消息)
                    this.$emit('clickHandler', val);
                }
            }
        });
        var App = {
            data() {
                return {

                }
            },
            template: `<Parent />`
        };
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            components: {
                App
            },
            template: `<App />`
        });
    </script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通信父子传值：子向父传，绑定自定义事件，使用$emit触发

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=".
复制链接

扫一扫

专栏目录