Vue常用传值方式、父传子、子传父及非父子实例分析
作者:巴啦啦小能量 时间:2024-05-29 22:43:32
本文实例讲述了Vue常用传值方式、父传子、子传父及非父子。分享给大家供大家参考,具体如下:
父组件向子组件传值是利用props
子组件中的注意事项:props:[‘greetMsg'],注意props后面是[]数组可以接收多个值,不是{}。
且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名
非父子组件进行传值
非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中 间仓库来传值,不然路由组件之间达不到传值的效果。
import Vue from 'vue'
export default new Vue()
//组件A:
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug,来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
//组件B:
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
Vue常用的传值方式就介绍完了,如果有什么不明白的,欢迎留言讨论!
希望本文所述对大家vue.js程序设计有所帮助。
来源:https://blog.csdn.net/mlonly/article/details/87857241
标签:Vue,传值方式
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
js 中将多个逗号替换为一个逗号的代码
2024-04-16 10:32:48
MySQL处理重复数据的方法
2024-01-24 04:08:27
php中让上传的文件大小在上传前就受限制的两种解决方法
2023-10-25 17:53:12
详解Python相关文件常见的后缀名
2021-05-21 23:47:53
![](https://img.aspxhome.com/file/2023/8/101648_0s.png)
MySQL数据库索引原理及优化策略
2024-01-20 00:35:42
![](https://img.aspxhome.com/file/2023/9/108909_0s.png)
Django 生成登陆验证码代码分享
2021-07-31 06:48:21
![](https://img.aspxhome.com/file/2023/8/79398_0s.jpg)
利用Python内置库实现创建命令行应用程序
2022-04-26 03:39:19
python访问sqlserver示例
2022-07-15 07:25:01
通过百度地图获取公交线路的站点坐标的js代码
2024-04-18 09:28:14
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2024-05-03 15:32:07
python3实现用turtle模块画一棵随机樱花树
2023-11-30 06:04:07
![](https://img.aspxhome.com/file/2023/9/78789_0s.jpg)
Python求导数的方法
2023-11-22 07:51:15
JavaScript使用readAsDataUrl方法预览图片
2024-05-02 17:28:41
i++循环与i-–循环的执行效率(递增与递减效率)
2023-05-28 03:07:40
golang Gorm框架讲解
2024-04-25 13:19:09
python 中的列表解析和生成表达式
2022-01-30 16:14:15
基于Python __dict__与dir()的区别详解
2021-04-23 15:00:34
Python学习之字符串常用方法总结
2021-12-19 02:19:46
![](https://img.aspxhome.com/file/2023/1/67781_0s.png)
Tensorflow--取tensorf指定列的操作方式
2021-06-25 21:21:02
![](https://img.aspxhome.com/file/2023/7/134817_0s.jpg)
Go语言设计实现在任务栏里提醒你喝水的兔子
2023-07-15 04:24:22
![](https://img.aspxhome.com/file/2023/1/95371_0s.webp)