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