Vue子组件向父组件传值示范方法
更新时间：2023年03月20日 11:14:39 作者：H_HX126
这篇文章主要介绍了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>
点击之后父组件才能访问子组件中的数据
到此这篇关于Vue子组件向父组件传值示范方法的文章就介绍到这了,更多相关Vue子向父传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 移动端适配方案详解，详细的介绍2种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
如何实现echarts markline标签名显示自己想要的
这篇文章主要介绍了实现echarts markline标签名显示自己想要的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue 计算属性 computed，一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，下面我们来看看具体实例,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了在Vue3中实现飘逸的元素拖拽,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue登录注册并保持登录状态的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了详解如何使用vue和electron开发一个桌面应用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了Vue Element UI自定义描述列表组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要给大家介绍了关于vue使用Echarts绘制地图的相关资料,Apache ECharts一个基于JavaScript的开源可视化图表库,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue子组件created方法不执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论