Vue常用傳值方式、父?jìng)髯印⒆觽鞲讣胺歉缸訉?shí)例分析
本文實(shí)例講述了Vue常用傳值方式、父?jìng)髯?、子傳父及非父子。分享給大家供大家參考,具體如下:
父組件向子組件傳值是利用props
子組件中的注意事項(xiàng):props:[‘greetMsg'],注意props后面是[]數(shù)組可以接收多個(gè)值,不是{}。
且此處的greetMsg用greet-msg會(huì)報(bào)錯(cuò),記住需用駝峰法命名
非父子組件進(jìn)行傳值
非父子組件之間傳值,需要定義個(gè)公共的公共實(shí)例文件bus.js,作為中 間倉(cāng)庫(kù)來(lái)傳值,不然路由組件之間達(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,來(lái)做為中間傳達(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事件來(lái)接收參數(shù) Bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getData: function () { this.name++ } } } </script>
Vue常用的傳值方式就介紹完了,如果有什么不明白的,歡迎留言討論!
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案
這篇文章主要為大家介紹了微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03前端使用vue實(shí)現(xiàn)token無(wú)感刷新的三種方案解析
這篇文章主要為大家介紹了前端使用vue實(shí)現(xiàn)token無(wú)感刷新的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue中定義全局聲明vscode插件提示找不到問(wèn)題解決
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05