溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的

發(fā)布時間：2020-12-07 14:28:31 來源：億速云 閱讀：395 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

**解決的問題：**

使用$attrs和$listeners實現(xiàn)祖孫組件之間的數(shù)據(jù)傳遞，也就是多重嵌套組件之間的數(shù)據(jù)傳遞。

**注意：**

使用$attrs和$listeners來實現(xiàn)的

**解決方案：**

**首先創(chuàng)建父組件：** 父組件用于動態(tài)數(shù)據(jù)的綁定與事件的定義

<template>
 
 <div>
   <!--這里 :one和:two是向后代組件傳遞數(shù)據(jù)-->
  <child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1>
 </div>
</template>
<script> 
import Child1 from './Child.vue'; 
export default { 
 data () {
   return {
   child1:'lihua',
   child2:'lignag',
   parent: 0
   };
  },
 
 components: {
  'child1':Child1 //引入子組件
  },
 
 methods: {
   onTest1 () {
    console.log('child')
   },
 
  onTest2 (val) {
   this.parent = val
   }
  }
 }
 </script>

子組件的寫法： 通過設(shè)置v-bind="$attrs" 和v-on="$listeners"來充當(dāng)中間人，

<template>
 <div class="child-1">
  <p>$attrs:{{$attrs['two']}}</p> 
  <hr>
  <!-- 子組件中通過v-bind='$attrs'接受數(shù)據(jù)，通過$listeners接收事件 -->
  <child2 v-bind="$attrs" v-on="$listeners"></child2>
 </div>
</template>
<script>
import child2 from './Child2.vue';
export default {
 props: ['one','two'], //可寫可不寫
 data () {
  return {
   
  }
 },
 inheritAttrs: false, //父組件傳遞動態(tài)數(shù)據(jù)后，子組件的默認(rèn)行為
 components: {
  child2 
 },
 mounted () {
  this.$emit('test1') //觸發(fā)父組件方法的一種方式
  this.$listeners.test2(123) //觸發(fā)父組件方法的另一種方式
 }
}
</script>

孫組件寫法： 通過props或者$attrs和$listeners來獲取父組件數(shù)據(jù)和事件。

<template>
 <div class="child-2">
  <p>props:{{one}}</p>
  <p>props:{{two}}</p>
  <p>$attrs: {{$attrs['one']}}</p> 
  <hr>
 </div>
</template>
<script>
export default {
 props:['one','two'], //接收父組件傳遞的數(shù)據(jù)，可以不寫，通過$attrs來獲取
 data(){
  return {};
 },
 inheritAttrs: false, //默認(rèn)行為需要取消
 mounted(){
  this.$emit('test1') //觸發(fā)父組件方法的一種方式
  this.$listeners.test1(123)//觸發(fā)父組件方法的另一種方式
 }
}
</script>

另：inheritAttrs的作用:

先注意一點：使用$attrs時inhertAttrs設(shè)置為false.

當(dāng)inheritAttrs設(shè)置為true時，父元素動態(tài)綁定組件的數(shù)據(jù)，子組件如果沒有通過props接收的話，該屬性就會附加于子組件的根元素上。什么意思看代碼

//父組件
 
<child :one="help"></child>
 
data(){
 return {
 help:123 
 }
 }
 
//子組件
 <template>
 <div>
 <h2>作為子組件的我并沒有設(shè)置props來接收父組件的one屬性。</h2>
 </div>
</template>
 
//父組件解析出來就是這樣
 
<div one="123">
 <h2>作為子組件的我并沒有設(shè)置props來接收父組件的one屬性。</h2>
</div>

所以呢我們通過v-bind="$attrs"來指定父組件數(shù)據(jù)的綁定位置，同時設(shè)置inheritAttrs為false來取消默認(rèn)行為

補(bǔ)充知識：理解Vue.mixin，利用Vue.mixin正確的偷懶

關(guān)于Vue.mixin在vue官方文檔中是這么解釋的：

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項。

我們的理解：

Vue.mixin給我們提供了一種混入Vue實例的方法，創(chuàng)建了混入對象之后，我們自定義的方法或者變量可以很輕松的掛載在Vue實例上，給我們的偷懶帶來方便；

Vue.mixin為我們提供了兩種混入方式：局部混入和全局混入；

本文還是以demo形式來進(jìn)行學(xué)習(xí)講解，如果有條件最好還是跟著demo敲一遍，這樣印象才會深刻；

局部混入：

顧名思義就是部分混入，也就是只有引入了mixin的混入對象才可以使用，并且只有在引入了mixin混入對象的組件中才生效；

來，知道了概念，我們一起來看看代碼：

首先自己搭建Vue的開發(fā)環(huán)境，然后我們在src目錄中新建兩個vue文件，分別是page1.vue和page2.vue；

page1.vue

<template>
 <div>page1的值是:</div>
</template>

<script>
export default {
 data () {
 return {
  
 }
 },
}
</script>

<style scoped>
</style>

page2.vue

<template>
 <div>page2的值是:</div>
</template>

<script>
export default {
 data () {
 return {
  
 }
 }
}
</script>

<style scoped>

</style>

然后我們修改App.vue

<template>
 <div id="app">
 <button @click="method1">page1</button>
 <button @click="method2">page2</button>

 <router-view></router-view>
 </div>
</template>

<script>
export default {
 name: 'App',
 methods:{
 method1(){
  this.$router.push('/page1');
 },
 method2(){
  this.$router.push('/page2');
 }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

在src目錄下創(chuàng)建router.js文件，配置路由實現(xiàn)跳轉(zhuǎn)

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import page1 from "./page1";
import page2 from "./page2";

const routes=[
 {path:"/page1",component:page1},
 {path:"/page2",component:page2}
]

const router=new VueRouter({
 routes
})

export default router

最后將路由引入main.js中：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

完成上述準(zhǔn)備工作之后，我們可以看到現(xiàn)在的頁面效果如下：

vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的

沒有報錯，我們開始正式進(jìn)入學(xué)習(xí)Vue.mixin：

首先我們在src目錄下新建一個名為mixin的文件夾并在mixin文件中創(chuàng)建一個mixin.js文件：

//拋出混入對象，方便外部訪問
export const mixin={
 data(){
  return {
   number:1
  }
 }
}

可以看到我們在混入對象中創(chuàng)建了一個變量，是的，混入對象跟Vue實例的格式是一樣的；

然后我們可以將mixin.js引入到我們的page1.vue和page2.vue中

page1.vue

<template>
 //這里讀的值其實是mixin的值，因為這個時候mixin已經(jīng)混入到vue實例中了
 <div>page1的值是:{{number}}</div>
</template>

<script>
//引入mixin.js
import {mixin} from "./mixin/mixin"
export default {
//這里注意：屬性名為mixins，值為數(shù)組類型
 mixins:[mixin],
 data () {
 return {
  
 }
 },
}
</script>

<style scoped>

</style>

page2.vue

<template>
 <div>page2的值是:{{number}}</div>
</template>

<script>
import {mixin} from "./mixin/mixin"
export default {
 mixins:[mixin],
 data () {
 return {
  
 }
 }
}
</script>

<style scoped>

</style>

這個時候我們的混入對象已經(jīng)成功混入到Vue實例中，你們可以點擊看看效果，是可以正常運(yùn)行并且能讀取到值的；

現(xiàn)在我們來修改page1.vue的代碼：　

<template>
 <div>page2的值是:{{number}}</div>
</template>

<script>
import {mixin} from "./mixin/mixin"
export default {
 mixins:[mixin],
 data () {
 return {
  
 }
 }
}
</script>

<style scoped>

</style>

page2不變，再運(yùn)行可以發(fā)現(xiàn)，我們的page1.vue中的值是執(zhí)行了mounted，所以產(chǎn)生了自增

由此，我們可以知道m(xù)ixin混入對象的變量是不會共享的；也就是你page1發(fā)生了變化，并不會通知mixin進(jìn)行實時刷新數(shù)據(jù)，發(fā)生的變化只會在page1.vue中生效，不影響其他組件；

現(xiàn)在我們修改mixin.js和page1.vue中的代碼：

mixin.js

export const mixin={
 data(){
  return {
   number:1
  }
 },
 created(){
   console.log("mixin混入對象")
 }
}

page1.vue

<template>
 <div>page1的值是:{{number}}</div>
</template>

<script>
import {mixin} from "./mixin/mixin"
export default {
 mixins:[mixin],
 data () {
 return {
  
 }
 },
 created(){
   console.log("這里是page1");
 }
}
</script>

<style scoped>

</style>

這個時候我們再運(yùn)行可以發(fā)現(xiàn)控制臺輸出是這個樣子的：

vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的

是的，mixin混入對象中聲明了：如果是同名鉤子函數(shù)將合并為一個數(shù)組，因此都被調(diào)用，但是混入對象的鉤子將在自身實例鉤子之前觸發(fā)；

值為對象的選項，例如methods,components等如果變量名和mixin混入對象的變量名發(fā)生沖突，將會以組件優(yōu)先并進(jìn)行遞歸合并，相當(dāng)于組件數(shù)據(jù)直接覆蓋了mixin中的同名數(shù)據(jù)；

我們可以修改代碼mixin.js和page1.vue

mixin.js

export const mixin={
 data(){
  return {
   number:1
  }
 },
 methods:{
  demo1(){
   console.log("mixin混入對象")
  }
 }
}

page1.vue

<template>
 <div>page1的值是:{{number}}</div>
</template>

<script>
import {mixin} from "./mixin/mixin"
export default {
 mixins:[mixin],
 data () {
 return {
  number:10
 }
 },
 mounted(){
  this.demo1();
 },
 methods:{
  demo1(){
  console.log("這里是page1");
  } 
 }
}
</script>

<style scoped>

</style>

運(yùn)行代碼我們可以很清晰的看到都是執(zhí)行我們組件內(nèi)的值；

vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的

因為在vue中我們在實例中聲明變量也是通過鍵值對的形式來聲明的，其實也是一個對象；

全局混入：

全局混入我們只需要把mixin.js引入到main.js中，然后將mixin放入到Vue.mixin()方法中即可；

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'
import mixin from "./mixin/mixin.js"
Vue.config.productionTip = false
Vue.mixin(mixin)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

是的，全局混入更為便捷，我們將不用在子組件聲明，全局混入將會影響每一個組件的實例，使用的時候需要小心謹(jǐn)慎；這樣全局混入之后，我們可以直接在組件中通過this.變量/方法來調(diào)用mixin混入對象的變量/方法；

很多同學(xué)可能看到這里會有一些疑問，這不就跟Vuex差不多嘛，其實不是的：

mixin混入對象和Vuex的區(qū)別：

Vuex是狀態(tài)共享管理，所以Vuex中的所有變量和方法都是可以讀取和更改并相互影響的；

mixin可以定義公用的變量或方法，但是mixin中的數(shù)據(jù)是不共享的，也就是每個組件中的mixin實例都是不一樣的，都是單獨存在的個體，不存在相互影響的；

mixin混入對象值為函數(shù)的同名函數(shù)選項將會進(jìn)行遞歸合并為數(shù)組，兩個函數(shù)都會執(zhí)行，只不過先執(zhí)行mixin中的同名函數(shù)；

mixin混入對象值為對象的同名對象將會進(jìn)行替換，都優(yōu)先執(zhí)行組件內(nèi)的同名對象，也就是組件內(nèi)的同名對象將mixin混入對象的同名對象進(jìn)行覆蓋；

看完上述內(nèi)容，你們對vue中的祖孫組件是如何進(jìn)行數(shù)據(jù)傳遞的有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手