Vue子组件向父组件传值的方法是什么

2023-07-05 14:07:00 798人浏览薄情痞子

摘要

这篇文章主要介绍了Vue子组件向父组件传值的方法是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue子组件向父组件传值的方法是什么文章都会有所收获，下面我们一起来看看吧。一、要点概述子组件：通过某种事件（

这篇文章主要介绍了Vue子组件向父组件传值的方法是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue子组件向父组件传值的方法是什么文章都会有所收获，下面我们一起来看看吧。

一、要点概述

子组件：通过某种事件（这里是@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>    <h4>{{parentmsg}}</h4></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>        <h4>{{parentmsg}}</h4>    </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>

Vue子组件向父组件传值的方法是什么