通過(guò) props 傳遞屬性

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

父組件

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

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

子組件

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

通過(guò) $attrs 來(lái)收集屬性

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

父組件

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

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

子組件

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

通過(guò)$listeners 來(lái)收集方法

$listeners 會(huì)收集組件上綁定的方法。 可以通過(guò)傳遞實(shí)參的方式改變父組件的值

父組件

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

子組件中this.$listeners會(huì)收集綁定在組件上的方法。通過(guò)this.$listeners.XXX()可以直接調(diào)用，以此可以來(lái)修改父組件data中的值

子組件

<template> <div class='container'> <button @click='change'>點(diǎn)一下</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>

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

通過(guò)給父級(jí)的 provide 提供一個(gè)依賴對(duì)象，讓其所用子組件都能訪問(wèn)到這個(gè)對(duì)象

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

其實(shí)也就是說(shuō)provide 和 inject 綁定本身不做額外的事情（數(shù)據(jù)綁定之類），只是將提供的數(shù)據(jù)暴露給子組件。那么暴露出來(lái)的數(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本身就是一個(gè)可監(jiān)聽(tīng)的對(duì)象。 // this也就是當(dāng)前vue實(shí)例本身已完成了數(shù)據(jù)響應(yīng)，這里只是將這個(gè)實(shí)例暴露給了他的所用子組件 app:this } }, data () { return { msg: ’這是測(cè)試數(shù)據(jù)’ } }, methods: { change(){ this.msg += 1; } }, components: { demo2 }}</script>

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

子組件

<template> <div class='container'> <!-- 這個(gè)msg的值不會(huì)變 --> <div>{{msg}} </div> <!-- msg的值會(huì)變，因?yàn)橐廊恢赶蚋附M件的vue實(shí)例 --> <div>{{app.$data.msg}}</div> <button @click='msgChange'>點(diǎn)一下</button> </div></template><script>export default { inject:[’msg’,’msgChange’,’app’]};</script>直接訪問(wèn)組件實(shí)例的方式獲取數(shù)據(jù)

通過(guò) ref 獲取組件實(shí)例

ref 屬性定義在組件上獲取的是組件的vue實(shí)例，定義在原生標(biāo)簽上獲取的是對(duì)應(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>

通過(guò)$parent/$children 獲取組件實(shí)例

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

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

父組件通過(guò)$children獲取子組件實(shí)例

父組件

<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) //獲取子組件實(shí)例上的sonMsg，$children是個(gè)數(shù)組需要選擇對(duì)應(yīng)的索引 this.msg = this.$children[0].sonMsg; }, components: { demo2 }}</script>

子組件通過(guò)$paren獲取父組件實(shí)例

子組件

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

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

在Vue原型上添加一個(gè)$bus為一個(gè)新的vue對(duì)象，可以在全局的vue實(shí)例中通過(guò)$bus獲取到這個(gè)vue對(duì)象，從而獲取這個(gè)對(duì)象上的屬性和方法。

在main.js中定義

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

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

通過(guò) 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'>點(diǎn)一下</button> <button @click='asyncChange'>點(diǎn)一下</button> </div></template><script>// 引入mapState輔助函數(shù)改造state數(shù)據(jù)import { mapState,mapMutations,mapActions } from ’vuex’export default { data(){ return { msg:’這是測(cè)試數(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>

以上就是對(duì)Vue中組件間數(shù)據(jù)傳遞的方式進(jìn)行了一個(gè)總結(jié)，在日常的開(kāi)發(fā)中還是需要根據(jù)使用的場(chǎng)景采取合適的方式進(jìn)行數(shù)據(jù)的傳遞

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