通過 props 傳遞屬性

父級給demo2組件綁定一個msg數據

父組件

<template> <div class=’container’> <demo2 :msg='msg' @change='change' /> </div></template><script>import demo2 from ’./demo2’export default { data(){ return { msg:’這是測試數據’ } }, methods:{ change(value){ this.msg = value } }, components: { demo2 }}</script>

子組件通過定義props來使用msg，$emit觸發外部的函數來改變父級傳入的值

子組件

<template> <div class=’container’> {{msg}} <button @click='change'>點一下</button> </div></template><script>export default { props:[’msg’], methods:{ change(){ this.$emit(’change’,’這是新的數據’) } }}</script>

通過 $attrs 來收集屬性

$attrs 會收集組件上綁定的屬性，對應class和style不會處理。如果與props同用，props的優先級要高于attrs

父組件

<template> <div class='container'> <demo2 :msg='msg' /> </div></template><script>import demo2 from './demo2';export default { data() { return { msg: '這是測試數據' }; }, components: { demo2 }};</script>

子組件中this.$attrs會收集組件上綁定的屬性

子組件

<template> <div class='container'>{{$attrs.msg}} </div></template><script>export default { // inheritAttrs:true, // 會隱藏行間的屬性 // props:[’msg’], // 這里props的優先級比$attrs要高，如果設置了props，那么msg會在data上，而$attrs中就沒有msg created(){ console.log(this.$attrs) // 對象中只有msg一個屬性 }};</script>

通過$listeners 來收集方法

$listeners 會收集組件上綁定的方法。 可以通過傳遞實參的方式改變父組件的值

父組件

<template> <div class=’container’> {{msg}} <demo2 @msgChange='change'/> </div></template><script>import demo2 from ’./demo2’export default { data () { return { msg: ’這是測試數據’ } }, methods: { change(newvalue){ this.msg = newvalue; } }, components: { demo2 }}</script>

子組件中this.$listeners會收集綁定在組件上的方法。通過this.$listeners.XXX()可以直接調用，以此可以來修改父組件data中的值

子組件

<template> <div class='container'> <button @click='change'>點一下</button> </div></template><script>export default { // inheritAttrs:true, created(){ console.log(this) }, methods:{ change(){ // this.$emit(’msgChange’) // this.$parent.change() // 與$emit功能相同，$parent也能夠實現該效果 this.$listeners.msgChange(’改變后的值’) } }};</script>

通過provide提供依賴，inject注入依賴實現數據跨多級子組件傳遞

通過給父級的 provide 提供一個依賴對象，讓其所用子組件都能訪問到這個對象

“provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的 property 還是可響應的。”

其實也就是說provide 和 inject 綁定本身不做額外的事情（數據綁定之類），只是將提供的數據暴露給子組件。那么暴露出來的數據是不是可相應的就取決與數據本身

父組件

<template> <div class=’container’> <demo2 :msg='msg' @msgChange='change'/> </div></template><script>import demo2 from ’./demo2’export default { provide(){ return { msg:this.msg, msgChange:this.change, // 這里this本身就是一個可監聽的對象。 // this也就是當前vue實例本身已完成了數據響應，這里只是將這個實例暴露給了他的所用子組件 app:this } }, data () { return { msg: ’這是測試數據’ } }, methods: { change(){ this.msg += 1; } }, components: { demo2 }}</script>

后代的子組件可以通過reject注入相應的依賴

子組件

<template> <div class='container'> <!-- 這個msg的值不會變 --> <div>{{msg}} </div> <!-- msg的值會變，因為依然指向父組件的vue實例 --> <div>{{app.$data.msg}}</div> <button @click='msgChange'>點一下</button> </div></template><script>export default { inject:[’msg’,’msgChange’,’app’]};</script>直接訪問組件實例的方式獲取數據

通過 ref 獲取組件實例

ref 屬性定義在組件上獲取的是組件的vue實例，定義在原生標簽上獲取的是對應的dom

需要等掛載之后才能拿到$refs中的內容

父組件

<template> <div class=’container’> {{msg}} <demo2 ref='test'/> </div></template><script>import demo2 from ’./demo2’export default { data () { return { msg: ’’ } }, // 需要等掛載之后才能拿到$refs中的內容。 // 所用不能在模板中使用 mounted(){ this.msg = this.$refs.test.msg }, components: { demo2 }}</script>

子組件

<script>export default { data(){ return { msg:’這是子組件的數據’ } }}</script>

通過$parent/$children 獲取組件實例

同樣的也是必須在mounted之后才能獲取對應實例

這里是父組件展示子組件中的msg，子組件展示父組件的msg

父組件通過$children獲取子組件實例

父組件

<template> <div class=’container’> {{msg}} <demo2/> </div></template><script>import demo2 from ’./demo2’export default { data () { return { msg: ’’, fatherMsg:'這是父組件的內容' } }, mounted(){ console.log(this.$children) //獲取子組件實例上的sonMsg，$children是個數組需要選擇對應的索引 this.msg = this.$children[0].sonMsg; }, components: { demo2 }}</script>

子組件通過$paren獲取父組件實例

子組件

<template> <div class=’container’> {{msg}} </div></template><script>export default { data () { return { msg:’’, sonMsg: ’這是子組件的數據’ } }, mounted(){ //獲取父組件的實例上的fatherMsg this.msg = this.$parent.fatherMsg; }}</script>定義一個公共倉庫共享數據

定義 eventBus 共享數據

在Vue原型上添加一個$bus為一個新的vue對象，可以在全局的vue實例中通過$bus獲取到這個vue對象，從而獲取這個對象上的屬性和方法。

在main.js中定義

Vue.prototype.$bus = new Vue({ data:{ a:1, b:2 }, methods:{ log(){ console.log(this.a) } }})

全局Vue實例都能獲取到定義在$bus上的屬性和方法

通過 Vuex 共享數據

官方給出的跨多組件傳遞數據的解決方案。

store index.js

import Vue from ’vue’import Vuex from ’vuex’Vue.use(Vuex)export default new Vuex.Store({ state: { test:’123123123’, test2:’123123123’, }, mutations: { changeTest(state,payload){ console.log(state,payload) state.test = payload.value }, changeTest2(state,payload){ console.log(state,payload) state.test2 = payload.value } }, actions: { asyncChageTest({commit},payload){ setTimeout( ()=>{ commit(’changeTest2’,payload) },2000) } }, modules: { }})

在組件中使用

<template> <div class=’container’> {{this.$store.state.test}} {{test}} {{this.$store.state.test2}} {{test2}} <button @click='change'>點一下</button> <button @click='asyncChange'>點一下</button> </div></template><script>// 引入mapState輔助函數改造state數據import { mapState,mapMutations,mapActions } from ’vuex’export default { data(){ return { msg:’這是測試數據’ } }, computed:{ ...mapState([’test’,’test2’]) }, methods:{ // 放異步或者同步的方法引入 ...mapMutations([’changeTest’]), ...mapActions([’asyncChageTest’]), change(){ // 同步修改state值的兩種方法 this.$store.commit(’changeTest’,{value:’改變后test的值’}); // this.changeTest({value:’改變后的值’}) }, asyncChange(){ // 異步修改state值的兩種方法 this.$store.dispatch(’asyncChageTest’,{value:’改變后test2的值’}) // this.asyncChageTest({value:’改變后test2的值’}) } },}</script>

以上就是對Vue中組件間數據傳遞的方式進行了一個總結，在日常的開發中還是需要根據使用的場景采取合適的方式進行數據的傳遞

到此這篇關于Vue組件間數據傳遞的方式(3種)的文章就介紹到這了,更多相關Vue組件間數據傳遞內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！