Vue常用传值方式、父传子、子传父及非父子实例分析
更新时间：2020年02月24日 12:22:59 作者：巴啦啦小能量
这篇文章主要介绍了Vue常用传值方式、父传子、子传父及非父子,结合实例形式分析了vue.js常见的传值方式及相关操作注意事项,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的响应式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以监听某个属性,但不能监听整个对象,且无法监听对象属性的新增和删除,Proxy可以监听整个对象,且不会修改原数据,可以监听数组的长度变化2025-01-01
这篇文章主要介绍了一个基于vue.js无缝滚动效果,文中给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,vue跳转页面有好几种不同方法,文中通过代码将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
vue+electron实现创建多窗口及窗口间的通信(实施方案)
这篇文章主要介绍了vue+electron实现创建多窗口及窗口间的通信,本文给大家分享实施方案结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧2017-07-07
Vue对Element中的el-tag添加@click事件无效的解决
本文主要介绍了Vue对Element中的el-tag添加@click事件无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了怎样在vue项目下添加ESLint的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
React/vue开发报错TypeError:this.getOptions is not a function
这篇文章主要给大家介绍了关于React/vue开发报错TypeError:this.getOptions is not a function的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
vue登录页面回车执行事件@keyup.enter.native问题
这篇文章主要介绍了vue登录页面回车执行事件@keyup.enter.native问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue配置生产环境.env.production与测试环境.env.development
这篇文章主要介绍了vue配置生产环境.env.production与测试环境.env.development方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论