vue祖孫組件之間的數(shù)據(jù)傳遞案例
**解決的問(wèn)題：**
使用$attrs和$listeners實(shí)現(xiàn)祖孫組件之間的數(shù)據(jù)傳遞，也就是多重嵌套組件之間的數(shù)據(jù)傳遞。
**注意：**
本方法針對(duì)vue2.4版本及以上，使用$attrs和$listeners來(lái)實(shí)現(xiàn)的
**解決方案：**
**首先創(chuàng)建父組件：** 父組件用于動(dò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>
子組件的寫法： 通過(guò)設(shè)置v-bind="$attrs" 和v-on="$listeners"來(lái)充當(dāng)中間人，
<template>
<div class="child-1">
<p>$attrs:{{$attrs['two']}}</p>
<hr>
<!-- 子組件中通過(guò)v-bind='$attrs'接受數(shù)據(jù)，通過(guò)$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, //父組件傳遞動(dòng)態(tài)數(shù)據(jù)后，子組件的默認(rèn)行為
components: {
child2
},
mounted () {
this.$emit('test1') //觸發(fā)父組件方法的一種方式
this.$listeners.test2(123) //觸發(fā)父組件方法的另一種方式
}
}
</script>
孫組件寫法： 通過(guò)props或者$attrs和$listeners來(lái)獲取父組件數(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ù)，可以不寫，通過(guò)$attrs來(lái)獲取
data(){
return {};
},
inheritAttrs: false, //默認(rèn)行為需要取消
mounted(){
this.$emit('test1') //觸發(fā)父組件方法的一種方式
this.$listeners.test1(123)//觸發(fā)父組件方法的另一種方式
}
}
</script>
另：inheritAttrs的作用:
先注意一點(diǎn)：使用$attrs時(shí)inhertAttrs設(shè)置為false.
當(dāng)inheritAttrs設(shè)置為true時(shí)，父元素動(dòng)態(tài)綁定組件的數(shù)據(jù)，子組件如果沒(méi)有通過(guò)props接收的話，該屬性就會(huì)附加于子組件的根元素上。什么意思看代碼
//父組件
<child :one="help"></child>
data(){
return {
help:123
}
}
//子組件
<template>
<div>
<h1>作為子組件的我并沒(méi)有設(shè)置props來(lái)接收父組件的one屬性。</h1>
</div>
</template>
//父組件解析出來(lái)就是這樣
<div one="123">
<h1>作為子組件的我并沒(méi)有設(shè)置props來(lái)接收父組件的one屬性。</h1>
</div>
所以呢我們通過(guò)v-bind="$attrs"來(lái)指定父組件數(shù)據(jù)的綁定位置，同時(shí)設(shè)置inheritAttrs為false來(lái)取消默認(rèn)行為
補(bǔ)充知識(shí)：理解Vue.mixin，利用Vue.mixin正確的偷懶
關(guān)于Vue.mixin在vue官方文檔中是這么解釋的：
混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
我們的理解：
Vue.mixin給我們提供了一種混入Vue實(shí)例的方法，創(chuàng)建了混入對(duì)象之后，我們自定義的方法或者變量可以很輕松的掛載在Vue實(shí)例上，給我們的偷懶帶來(lái)方便；
Vue.mixin為我們提供了兩種混入方式：局部混入和全局混入；
本文還是以demo形式來(lái)進(jìn)行學(xué)習(xí)講解，如果有條件最好還是跟著demo敲一遍，這樣印象才會(huì)深刻；
局部混入：
顧名思義就是部分混入，也就是只有引入了mixin的混入對(duì)象才可以使用，并且只有在引入了mixin混入對(duì)象的組件中才生效；
來(lái)，知道了概念，我們一起來(lái)看看代碼：
首先自己搭建Vue的開(kāi)發(fā)環(huán)境，然后我們?cè)趕rc目錄中新建兩個(gè)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文件，配置路由實(shí)現(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)在的頁(yè)面效果如下：
沒(méi)有報(bào)錯(cuò)，我們開(kāi)始正式進(jìn)入學(xué)習(xí)Vue.mixin：
首先我們?cè)趕rc目錄下新建一個(gè)名為mixin的文件夾并在mixin文件中創(chuàng)建一個(gè)mixin.js文件：
//拋出混入對(duì)象，方便外部訪問(wèn)
export const mixin={
data(){
return {
number:1
}
}
}
可以看到我們?cè)诨烊雽?duì)象中創(chuàng)建了一個(gè)變量，是的，混入對(duì)象跟Vue實(shí)例的格式是一樣的；
然后我們可以將mixin.js引入到我們的page1.vue和page2.vue中
page1.vue
<template>
//這里讀的值其實(shí)是mixin的值，因?yàn)檫@個(gè)時(shí)候mixin已經(jīng)混入到vue實(shí)例中了
<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>
這個(gè)時(shí)候我們的混入對(duì)象已經(jīng)成功混入到Vue實(shí)例中，你們可以點(diǎn)擊看看效果，是可以正常運(yùn)行并且能讀取到值的；
現(xiàn)在我們來(lái)修改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混入對(duì)象的變量是不會(huì)共享的；也就是你page1發(fā)生了變化，并不會(huì)通知mixin進(jìn)行實(shí)時(shí)刷新數(shù)據(jù)，發(fā)生的變化只會(huì)在page1.vue中生效，不影響其他組件；
現(xiàn)在我們修改mixin.js和page1.vue中的代碼：
mixin.js
export const mixin={
data(){
return {
number:1
}
},
created(){
console.log("mixin混入對(duì)象")
}
}
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>
這個(gè)時(shí)候我們?cè)龠\(yùn)行可以發(fā)現(xiàn)控制臺(tái)輸出是這個(gè)樣子的：
是的，mixin混入對(duì)象中聲明了：如果是同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都被調(diào)用，但是混入對(duì)象的鉤子將在自身實(shí)例鉤子之前觸發(fā)；
值為對(duì)象的選項(xiàng)，例如methods,components等如果變量名和mixin混入對(duì)象的變量名發(fā)生沖突，將會(huì)以組件優(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混入對(duì)象")
}
}
}
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)的值；
因?yàn)樵趘ue中我們?cè)趯?shí)例中聲明變量也是通過(guò)鍵值對(duì)的形式來(lái)聲明的，其實(shí)也是一個(gè)對(duì)象；
全局混入：
全局混入我們只需要把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/>'
})
是的，全局混入更為便捷，我們將不用在子組件聲明，全局混入將會(huì)影響每一個(gè)組件的實(shí)例，使用的時(shí)候需要小心謹(jǐn)慎；這樣全局混入之后，我們可以直接在組件中通過(guò)this.變量/方法來(lái)調(diào)用mixin混入對(duì)象的變量/方法；
很多同學(xué)可能看到這里會(huì)有一些疑問(wèn)，這不就跟Vuex差不多嘛，其實(shí)不是的：
mixin混入對(duì)象和Vuex的區(qū)別：
Vuex是狀態(tài)共享管理，所以Vuex中的所有變量和方法都是可以讀取和更改并相互影響的；
mixin可以定義公用的變量或方法，但是mixin中的數(shù)據(jù)是不共享的，也就是每個(gè)組件中的mixin實(shí)例都是不一樣的，都是單獨(dú)存在的個(gè)體，不存在相互影響的；
mixin混入對(duì)象值為函數(shù)的同名函數(shù)選項(xiàng)將會(huì)進(jìn)行遞歸合并為數(shù)組，兩個(gè)函數(shù)都會(huì)執(zhí)行，只不過(guò)先執(zhí)行mixin中的同名函數(shù)；
mixin混入對(duì)象值為對(duì)象的同名對(duì)象將會(huì)進(jìn)行替換，都優(yōu)先執(zhí)行組件內(nèi)的同名對(duì)象，也就是組件內(nèi)的同名對(duì)象將mixin混入對(duì)象的同名對(duì)象進(jìn)行覆蓋；
以上這篇vue祖孫組件之間的數(shù)據(jù)傳遞案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router是Vue官方的路由插件，本文將結(jié)合實(shí)例代碼，介紹Vue-cli4路由配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue2路由跳轉(zhuǎn)傳參中文問(wèn)題處理方案
在el-table中的記錄列表中放置了一個(gè) 操作按鈕,點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁(yè)簽,并將通過(guò)路由傳參方式將一些信息傳遞到新打開(kāi)的tab頁(yè)簽中,但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn)報(bào)錯(cuò),所以本文給大家介紹了Vue2路由跳轉(zhuǎn)傳參中文問(wèn)題處理方案,需要的朋友可以參考下2024-05-05
Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選
這篇文章主要介紹了Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue中UI組件庫(kù)之Vuex與虛擬服務(wù)器初識(shí)
這篇文章主要介紹了Vue中UI組件庫(kù)之Vuex與虛擬服務(wù)器初識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue?如何引入本地某個(gè)文件?require，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09