Vue組件間數(shù)據(jù)傳遞的方式(3種)

更新時(shí)間：2020年07月13日 14:54:12 作者：YongCode

這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue中傳遞數(shù)據(jù)的方式有哪些

數(shù)據(jù)流的方式傳遞數(shù)據(jù)

通過 props 傳遞屬性

父級給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:'這是測試數(shù)據(jù)'
 }
 },
 methods:{
 change(value){
  this.msg = value
 }
 },
 components: {
 demo2
 }
}
</script>

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

子組件

<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>

通過 $attrs 來收集屬性

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

父組件

<template>
 <div class="container">
 <demo2 class="demo" style="color:red" :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一個(gè)屬性
 }
};
</script>

通過$listeners 來收集方法

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

父組件

<template>
 <div class='container'>
 {{msg}}
 <demo2 class="demo" style="color:red" @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">點(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>

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

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

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

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

父組件

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

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

子組件

<template>
 <div class="container">
 <!-- 這個(gè)msg的值不會變 -->
 <div>{{msg}} </div>
 <!-- msg的值會變，因?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>

直接訪問組件實(shí)例的方式獲取數(shù)據(jù)

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

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

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

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

父組件通過$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ù)組需要選擇對應(yīng)的索引
 this.msg = this.$children[0].sonMsg;
 },
 components: {
 demo2
 }
}
</script>

子組件通過$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è)公共倉庫共享數(shù)據(jù)

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

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

在main.js中定義

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

全局Vue實(shí)例都能獲取到定義在$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">點(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:'這是測試數(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)行了一個(gè)總結(jié)，在日常的開發(fā)中還是需要根據(jù)使用的場景采取合適的方式進(jìn)行數(shù)據(jù)的傳遞

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

您可能感興趣的文章: