Vue常用傳值方式、父傳子、子傳父及非父子實(shí)例分析
更新時間：2020年02月24日 12:22:59 作者：巴啦啦小能量
這篇文章主要介紹了Vue常用傳值方式、父傳子、子傳父及非父子,結(jié)合實(shí)例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了Vue常用傳值方式、父傳子、子傳父及非父子。分享給大家供大家參考，具體如下：
父組件向子組件傳值是利用props
子組件中的注意事項(xiàng)：props:[‘greetMsg']，注意props后面是[]數(shù)組可以接收多個值，不是{}。
且此處的greetMsg用greet-msg會報錯，記住需用駝峰法命名
非父子組件進(jìn)行傳值
非父子組件之間傳值，需要定義個公共的公共實(shí)例文件bus.js，作為中 間倉庫來傳值，不然路由組件之間達(dá)不到傳值的效果。
import Vue from 'vue' export default new Vue()
//組件A：
<template>
<div>
A組件:
<span>{{elementValue}}</span>
<input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，來做為中間傳達(dá)的工具
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="點(diǎn)擊觸發(fā)" @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事件來接收參數(shù)
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
Vue常用的傳值方式就介紹完了，如果有什么不明白的，歡迎留言討論！
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue左右側(cè)聯(lián)動滾動的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue 生命周期的過程，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
vue2.0采用了虛擬DOM來代替對真實(shí)DOM的操作，最后通過某種機(jī)制來完成對真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08
微信小程序Echarts動態(tài)使用及圖表層級踩坑解決方案
這篇文章主要為大家介紹了微信小程序Echarts動態(tài)使用及圖表層級踩坑解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。2018-09-09
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
前端使用vue實(shí)現(xiàn)token無感刷新的三種方案解析
這篇文章主要為大家介紹了前端使用vue實(shí)現(xiàn)token無感刷新的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了Vue的計(jì)算屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue2.0 datepicker的使用方法，非常不錯，具有參考借鑒借鑒價值，需要的朋友參考下2018-02-02