Vue子组件向父组件传值示范方法

Vue子向父传值 Vue子组件向父组件传值 2023-03-20 11:03:05 305人浏览薄情痞子

摘要

目录一、要点概述二、分步讲解三、总代码和运行结果一、要点概述子组件：通过某种事件（这里是@click点击事件，也可以是其他事件）发送数据，this.$emit('事件名&#

一、要点概述

子组件：通过某种事件（这里是@click点击事件，也可以是其他事件）发送数据，this.$emit('事件名',要传的数据)

父组件：在标签内部@子组件中定义的事件名，等于一个函数（这里是rev），通过rev（val）这个函数接收数据，把val赋值给自己的数据

二、分步讲解

初始化Vue实例，可以理解为父组件，在父组件中的data中初始化一个变量（parentmsg），用来接收值；

let vm = new Vue({
    el: '#app',
    data: {
        parentmsg:''
    }
});

自定义子组件，命名为Child，这个名字可以随意起，template里直接给一个id名，可以直接在html中写组件的内容，不再需要使用模板字符串写模板了，既方便又快捷;

在子组件的data函数里声明一个变量（childmsg）；

在子组件中写一个点击事件@click="send（）"，send函数内部通过this.$emitthis.$emit（'childsend',this.childmsg）向父组件发送数据；this.$emit的第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值；第二个参数为要传给父组件的数据；

Vue.component('Child',{
    template:'#tp',
    data() {
        return {
            childmsg:'这是子组件中的数据'
        }
    },
    methods: {
        send() {
            // 第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值
            // 第二个参数为要传给父组件的数据
            this.$emit('childsend',this.childmsg)
        }
    }
})

<!-- 子组件模板内容 -->
<template id="tp">
    <div>
        <button @click="send">点我向父组件传值</button>
    </div>
</template>

在父组件中，通过@子组件中定义的事件名，触发一个函数rev（val）来接收数据，把接收到的val值赋给自己的变量parentmsg，然后就可以在html中使用插值表达式或v-bind绑定属性值来使用子组件发送的数据了。

<div id="app">
    <Child @childsend="rev"></Child>
    <h3>{{parentmsg}}</h3>
</div>
methods: {
    // 父组件接收数据的函数
    rev(val) {
        // val就是子组件发送的数据
        this.parentmsg = val
    }
}

三、总代码和运行结果

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta Http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>子向父传值</title>
</head>
<body>
     <!-- 父组件 @childsend="rev" -->
    <div id="app">
        <Child @childsend="rev"></Child>
        <h3>{{parentmsg}}</h3>
    </div>
    <!-- 子组件 this.$emit('childsend',this.childmsg) -->
    <template id="tp">
        <div>
            <button @click="send">点我向父组件传值</button>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        // 自定义子组件
        Vue.component('Child',{
            template:'#tp',
            data() {
                return {
                    childmsg:'这是子组件中的数据'
                }
            },
            methods: {
                send() {
                    // 第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值
                    // 第二个参数为要传给父组件的数据
                    this.$emit('childsend',this.childmsg)
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                parentmsg:''
            },
            methods: {
                // 父组件接收数据的函数
                rev(val) {
                    // val就是子组件发送的数据
                    this.parentmsg = val
                }
            }
        });
    </script>
</body>
</html>