通過 props 傳遞屬性

父級給demo2組件綁定一個msg數(shù)據(jù)

父組件

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

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

子組件

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

通過 $attrs 來收集屬性

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

父組件

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

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

子組件

<template> <div class='container'>{{$attrs.msg}} </div></template><script>export default { // inheritAttrs:true, // 會隱藏行間的屬性 // props:[’msg’], // 這里props的優(yōu)先級比$attrs要高，如果設(shè)置了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: ’這是測試數(shù)據(jù)’ } }, methods: { change(newvalue){ this.msg = newvalue; } }, components: { demo2 }}</script>

子組件中this.$listeners會收集綁定在組件上的方法。通過this.$listeners.XXX()可以直接調(diào)用，以此可以來修改父組件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也能夠?qū)崿F(xiàn)該效果 this.$listeners.msgChange(’改變后的值’) } }};</script>

通過provide提供依賴，inject注入依賴實現(xiàn)數(shù)據(jù)跨多級子組件傳遞

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

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

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

父組件

<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本身就是一個可監(jiān)聽的對象。 // this也就是當(dāng)前vue實例本身已完成了數(shù)據(jù)響應(yīng)，這里只是將這個實例暴露給了他的所用子組件 app:this } }, data () { return { msg: ’這是測試數(shù)據(jù)’ } }, methods: { change(){ this.msg += 1; } }, components: { demo2 }}</script>

后代的子組件可以通過reject注入相應(yīng)的依賴

子組件

<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>直接訪問組件實例的方式獲取數(shù)據(jù)

通過 ref 獲取組件實例

ref 屬性定義在組件上獲取的是組件的vue實例，定義在原生標(biāo)簽上獲取的是對應(yīng)的dom

需要等掛載之后才能拿到$refs中的內(nèi)容

父組件

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

子組件

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

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

同樣的也是必須在mounted之后才能獲取對應(yīng)實例

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

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

父組件

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

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

子組件

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

定義 eventBus 共享數(shù)據(jù)

在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 共享數(shù)據(jù)

官方給出的跨多組件傳遞數(shù)據(jù)的解決方案。

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輔助函數(shù)改造state數(shù)據(jù)import { mapState,mapMutations,mapActions } from ’vuex’export default { data(){ return { msg:’這是測試數(shù)據(jù)’ } }, 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中組件間數(shù)據(jù)傳遞的方式進(jìn)行了一個總結(jié)，在日常的開發(fā)中還是需要根據(jù)使用的場景采取合適的方式進(jìn)行數(shù)據(jù)的傳遞

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