Vue常用傳值方式、父傳子、子傳父及非父子例項分析
阿新 • • 發佈:2020-02-26
本文例項講述了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程式設計有所幫助。