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>
 <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>

点击之后父组件才能访问子组件中的数据

作者:H_HX126原文地址:https://blog.csdn.net/weixin_46058007/article/details/129622508

%s 个评论

要回复文章请先登录注册