vue子组件给父组件传值
2023-06-13 09:12:00 时间
大家好,又见面了,我是你们的朋友全栈君。
子组件:
<template>
<div class="app">
<input @click="sendMsg" type="button" value="给父组件传递值">
</div>
</template>
<script>
export default {
data () {
return {
//将msg传递给父组件
msg: "我是子组件的msg",
}
},
methods:{
sendMsg(){
//func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
this.$emit('func',this.msg)
}
}
}
</script>
子组件通过this.$emit()的方式将值传递给父组件
注意:这里的func是父组件中绑定的函数名
父组件:
<template>
<div class="app">
<child @func="getMsgFormSon"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
msgFormSon: "this is msg"
}
},
components:{
child,
},
methods:{
getMsgFormSon(data){
this.msgFormSon = data
console.log(this.msgFormSon)
}
}
}
</script>
好了,so easy!
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134755.html原文链接:https://javaforall.cn
相关文章
- Vue父子组件传值的Demo「建议收藏」
- vue父子组件传值 简单了解vuex
- VUE父子组件之间的传值,以及兄弟组件之间的传值;
- vue组件 订单支付15分钟倒计时
- Vue父组件向子组件传值之props详解
- 最佳实践:vue组件引用传值(续篇)
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue组件通信_android组件间通信
- vue父子组件传值方法_vue父组件向子组件传递对象
- vue子组件传值给父组件_子组件调用父组件中的方法
- Vue 组件的通信
- VUE组件封装_vue组件内部双向绑定
- 如何使用Vue封装组件[通俗易懂]
- 请说下封装 vue 组件的过程?_组件二次封装的必要性
- vue子组件向父组件传值的三种方式_vue子组件修改父组件值
- vue 父组件调用子组件_react父组件向子组件传值
- vue组件间通信
- vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染[通俗易懂]
- vue中父子组件通过ref传值「dialog组件」
- vue使用elementUI组件提交表单(带图片)到node后台
- 今天讲vue讲解专栏里的VUE组件
- Vue非父子组件传值之事件总线(eventbus)的使用方式
- 每日一题之请描述Vue组件渲染流程
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue组件通信的其他方式
- Vue动态添加和删除组件的实现,子组件和父组件的传值实例演示
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)