vue单页开发父子组件传值思路详解
作者:小雷雷哥哥 时间:2024-04-28 10:54:15
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。
GitHub地址:https://github.com/leileibrother/wechat-vue
文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。
父组件引入子组件,父组件html的代码如下:
<template>
<div>
<h3>这是父组件</h3>
<p style="margin: 20px 0;text-align: center;">
<span>子组件传过来的值是 “{{childValue}}”</span>
</p>
<example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child>
</div>
</template>
<script>
import exampleChild from './examplechild.vue';
export default {
name: "example.vue",
components: {
exampleChild
},
data(){
return {
parentMsg:'hello',
childValue:''
}
},
mounted(){
},
methods: {
getValue:function (val) {
this.childValue = val;
}
}
}
</script>
<style scoped>
</style>
子组件代码如下:
<template>
<div>
<p style="margin: 20px 0;text-align: center;">我是子组件,父组件穿传过来的值是{{message}}</p>
<p style="margin: 20px 0;text-align: center;">
<button @click="send">点击向父组件传值</button>
</p>
</div>
</template>
<script>
export default {
name: "exampleChild.vue",
props:['message'],
data(){
return {
}
},
mounted(){
},
methods: {
send:function () {
this.$emit('getChildValue','你好父组件!')
}
}
}
</script>
<style scoped>
</style>
1,父组件向子组件传值。
在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,
在子组件中使用props接收值,如props:['message']
,接收父组件传过来的message字段,使用{{message}}
就是可以使用父组件传过来的值了。
2,子组件向父组件传值。
子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。
在子组件中使用$emit()
来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。
在父组件中如下,也需要这个中转站来接收值
getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。
总结
以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解网站的支持!
来源:https://blog.csdn.net/leileibrother/article/details/80346193
标签:vue,父子,组件,传值
0
投稿
猜你喜欢
排序的人文魅力
2008-05-06 12:47:00
浅谈go中cgo的几种使用方式
2024-02-15 06:55:51
Go语言学习网络编程与Http教程示例
2024-02-08 10:33:12
模型训练时GPU利用率太低的原因及解决
2021-02-05 22:22:07
python保存网页图片到本地的方法
2021-05-20 16:15:04
python爬取m3u8连接的视频
2023-06-18 13:40:21
安装Python和pygame及相应的环境变量配置(图文教程)
2023-09-05 15:54:42
python字典排序实例详解
2021-10-12 12:12:02
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2024-05-11 10:02:47
linux 部署apache服务的步骤
2022-11-28 02:59:16
element-ui表格列金额显示两位小数的方法
2024-04-26 17:41:10
Python中__init__和__new__的区别详解
2023-09-24 13:14:17
Python Opencv实现最强美颜滤镜效果
2021-11-09 11:23:15
VS2019 自定义项目模板的实现方法
2022-05-08 21:14:23
Python从csv文件中读取数据及提取数据的方法
2021-01-26 07:12:44
Python logging模块异步线程写日志实现过程解析
2023-07-29 05:05:03
如何修改Editplus让图片自适应界面大小
2007-09-26 12:37:00
go HTTP2 的头部压缩算法hpack实现详解
2024-05-21 10:27:37
SQL Server数据库优化经验总结
2009-03-16 14:22:00
pandas DataFrame 交集并集补集的实现
2023-05-02 12:03:27