重中之重的就是組件之間數(shù)據(jù)傳遞的幾種方式

Vue2最常見的11種組件間的通訊方式

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref（獲取子組件的屬性和調(diào)用子組件方法）本質(zhì)就是獲取到子組件的this
6. $children / $parent（獲取子組件（不包括順孫組件）的數(shù)組 / 獲取父組件的this）
7. $attrs / $listeners（$attrs子組件里面獲取父組件傳遞的屬性，$listeners子組件獲取父組件自定義的方法（這個自定義方法是子組件通過$emit傳遞過去的））
8. provide / inject
9. EventBus
10. Vuex
11. $root（獲取根組件的，new Vue里面定義的方法和屬性）
12. Slot
13. 發(fā)布訂閱（pubsub-js）
14. 本地存儲（localstorage和sessionstorage）

props

父組件向子組件傳送數(shù)據(jù)，這應(yīng)該是最常用的方式了

子組件接收到數(shù)據(jù)之后，不能直接修改父組件的數(shù)據(jù)。

否則會報錯，因為當(dāng)父組件重新渲染時，數(shù)據(jù)會被覆蓋。如果只在子組件內(nèi)要修改的話推薦使用?computed

// Parent.vue 傳送

<template>

<child :msg="msg"></child>

</template>

// Child.vue 接收

export default {

// 寫法一 用數(shù)組接收

props:['msg'],

// 寫法二 用對象接收，可以限定接收的數(shù)據(jù)類型、設(shè)置默認值、驗證等 props:{

msg:{

type:String,

default:'這是默認數(shù)據(jù)'

}

},

mounted(){

console.log(this.msg)

},

}

.sync 子組件可以修改父組件內(nèi)容

.sync可以幫我們實現(xiàn)父組件向子組件傳遞的數(shù)據(jù)的雙向綁定，所以子組件接收到數(shù)據(jù)后可以直接修改，并且會同時修改父組件的數(shù)據(jù)

// Parent.vue

<template>

<child :page.sync="page"></child>

</template>

<script>

export default {

data(){

return {

page:1

}

}

}

// Child.vue

export default {

props:["page"],

computed(){

// 當(dāng)我們在子組件里修改 currentPage 時，父組件的 page 也會隨之改變 currentPage {

get(){

return this.page

},

set(newVal){

this.$emit("update:page", newVal)

}

}

}

}</script>

v-model

和?.sync?類似，可以實現(xiàn)將父組件傳給子組件的數(shù)據(jù)為雙向綁定，子組件通過?$emit?修改父組件的數(shù)據(jù)

// Parent.vue

<template>

<child v-model="value"></child>

</template>

<script>

export default {

data(){

return {

value:1

}

}

}

// Child.vue

<template>

<input :value="value" @input="handlerChange">

</template>

export default {

props:["value"],

// 可以修改事件名，默認為 input model:{

event:"updateValue"

},

methods:{

handlerChange(e){

this.$emit("input", e.target.value)

// 如果有上面的重命名就是這樣

this.$emit("updateValue", e.target.value)

}

}

}</script>

ref

ref?如果在普通的DOM元素上，引用指向的就是該DOM元素;

如果在子組件上，引用的指向就是子組件實例;

父組件可以通過 ref 主動獲取子組件的屬性或者調(diào)用子組件的方法

// Child.vue

export default {

data(){

return {

name:"oldCode"

}

},

methods:{

someMethod(msg){

console.log(msg)

}

}

}

// Parent.vue

<template>

<child ref="child"></child>

</template>

<script>

export default {

mounted(){

const child = this.$refs.child

console.log(child.name)

child.someMethod("調(diào)用了子組件的方法")

}

}</script>

$emit / v-on

子組件通過派發(fā)事件的方式給父組件數(shù)據(jù)，或者觸發(fā)父組件更新等操作

// Child.vue 派發(fā)

export default {

data(){

return { msg: "這是發(fā)給父組件的信息" }

},

methods: {

handleClick(){

this.$emit("sendMsg",this.msg)

}

},

}// Parent.vue 響應(yīng)

<template>

<child v-on:sendMsg="getChildMsg"></child>

// 或 簡寫

<child @sendMsg="getChildMsg"></child>

</template>

export default {

methods:{

getChildMsg(msg){

console.log(msg) // 這是父組件接收到的消息 }

}

}

$attrs / $listeners

多層嵌套組件傳遞數(shù)據(jù)時，如果只是傳遞數(shù)據(jù)，而不做中間處理的話就可以用這個，比如父組件向?qū)O子組件傳遞數(shù)據(jù)時

$attrs：包含父作用域里除 class 和 style 除外的非 props 屬性集合。通過?this.$attrs?獲取父作用域中所有符合條件的屬性集合，然后還要繼續(xù)傳給子組件內(nèi)部的其他組件，就可以通過?v-bind="$attrs"

$listeners：包含父作用域里?.native?除外的監(jiān)聽事件集合。如果還要繼續(xù)傳給子組件內(nèi)部的其他組件，就可以通過?v-on="$linteners"使用方式是相同的

// Parent.vue

<template>

<child :name="name" title="1111" ></child>

</template

export default{

data(){

return {

name:"oldCode"

}

}

}

// Child.vue

<template>

// 繼續(xù)傳給孫子組件

<sun-child v-bind="$attrs"></sun-child>

</template>

export default{

props:["name"], // 這里可以接收，也可以不接收 mounted(){

// 如果props接收了name 就是 { title:1111 }，否則就是{ name:"oldCode", title:1111 }

console.log(this.$attrs)

}

}

$children / $parent

$children：獲取到一個包含所有子組件(不包含孫子組件)的?VueComponent?對象數(shù)組，可以直接拿到子組件中所有數(shù)據(jù)和方法等

$parent：獲取到一個父節(jié)點的?VueComponent?對象，同樣包含父節(jié)點中所有數(shù)據(jù)和方法等

// Parent.vue

export default{

mounted(){

this.$children[0].someMethod() // 調(diào)用第一個子組件的方法

this.$children[0].name // 獲取第一個子組件中的屬性 }

}

// Child.vue

export default{

mounted(){

this.$parent.someMethod() // 調(diào)用父組件的方法

this.$parent.name // 獲取父組件中的屬性 }

}

provide / inject

provide / inject?是依賴注入，在一些插件或組件庫里被常用

provide：可以讓我們指定想要提供給后代組件的數(shù)據(jù)或方法

inject：在任何后代組件中接收想要添加在這個組件上的數(shù)據(jù)或方法，不管組件嵌套多深都可以直接拿來用

要注意的是?provide?和?inject?傳遞的數(shù)據(jù)不是響應(yīng)式的，也就是說用?inject?接收來數(shù)據(jù)后，provide?里的數(shù)據(jù)改變了，后代組件中的數(shù)據(jù)不會改變，除非傳入的就是一個可監(jiān)聽的對象 所以建議還是傳遞一些常量或者方法

// 父組件

export default{

// 方法一 不能獲取 methods 中的方法 provide:{

name:"oldCode",

age: this.data中的屬性

},

// 方法二 不能獲取 data 中的屬性 provide(){

return {

name:"oldCode",

someMethod:this.someMethod // methods 中的方法 }

},

methods:{

someMethod(){

console.log("這是注入的方法")

}

}

}

// 后代組件

export default{

inject:["name","someMethod"],

//或者

inject: { foo: { from: 'bar', default: 'foo' } },

mounted(){

console.log(this.name)

this.someMethod()

}

}

EventBus

EventBus?是中央事件總線，不管是父子組件，兄弟組件，跨層級組件等都可以使用它完成通信操作

定義方式有三種

// 方法一

// 抽離成一個單獨的 js 文件 Bus.js ，然后在需要的地方引入

// Bus.js

import Vue from "vue"

export default new Vue()

// 方法二 直接掛載到全局

// main.js

import Vue from "vue"

Vue.prototype.$bus = new Vue()

// 方法三 注入到 Vue 根對象上

// main.js

import Vue from "vue"new Vue({

el:"#app",

data:{

Bus: new Vue()

}

})

使用如下，以方法一按需引入為例

// 在需要向外部發(fā)送自定義事件的組件內(nèi)

<template>

<button @click="handlerClick">按鈕</button>

</template>

import Bus from "./Bus.js"

export default{

methods:{

handlerClick(){

// 自定義事件名 sendMsg

Bus.$emit("sendMsg", "這是要向外部發(fā)送的數(shù)據(jù)")

}

}

}

// 在需要接收外部事件的組件內(nèi)

import Bus from "./Bus.js"

export default{

mounted(){

// 監(jiān)聽事件的觸發(fā)

Bus.$on("sendMsg", data => {

console.log("這是接收到的數(shù)據(jù)：", data)

})

},

beforeDestroy(){

// 取消監(jiān)聽

Bus.$off("sendMsg")

}

}

Vuex 在大項目中被常用

Vuex 是狀態(tài)管理器，集中式存儲管理所有組件的狀態(tài)。

新建一個index.js文件， 里內(nèi)容如下

import Vue from 'vue'

import Vuex from 'vuex'

import getters from './getters'

import actions from './actions'

import mutations from './mutations'

import state from './state'

import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({

modules: {

user

},

getters,

actions,

mutations,

state

})

export default store

然后在 main.js 引入

import Vue from "vue"

import store from "./store"new Vue({

el:"#app",

store,

render: h => h(App)

})

然后在需要的使用組件里

import { mapGetters, mapMutations } from "vuex"

export default{

computed:{

// 方式一 然后通過 this.屬性名就可以用了

...mapGetters(["引入getters.js里屬性1","屬性2"])

// 方式二

...mapGetters("user", ["user模塊里的屬性1","屬性2"])

},

methods:{

// 方式一 然后通過 this.屬性名就可以用了

...mapMutations(["引入mutations.js里的方法1","方法2"])

// 方式二

...mapMutations("user",["引入user模塊里的方法1","方法2"])

}

}

// 或者也可以這樣獲取this.$store.state.xxxthis.$store.state.user.xxx

slot插槽

就是把子組件的數(shù)據(jù)通過插槽的方式傳給父組件使用，然后再插回來

// Child.vue

<template>

<div>

<slot :user="user"></slot>

</div>

</template>

export default{

data(){

return {

user:{ name:"oldCode" }

}

}

}

// Parent.vue

<template>

<div>

<child v-slot="slotProps">

{{ slotProps.user.name }}

</child>

</div>

</template>

發(fā)布訂閱pubsub-js（react也使用）

使用subpub插件實現(xiàn)

消息訂閱=時間監(jiān)聽

方法：

import PubSub from 'pubsub-js'

mounted(){

??????/* 訂閱方法，消息名稱，匿名函數(shù)msg=消息名（不可省略），index是你需要傳遞的參數(shù) */

PubSub.subscribe('delData',(msg,index)=>{

this.renwu.splice(index,1)

});

},

接收組件

import PubSub from 'pubsub-js'

/* 消息發(fā)布，觸發(fā)消息訂閱里的邏輯 */

PubSub.publish('delData',this.index);文章來源地址http://www.zghlxwxcb.cn/news/detail-771611.html

到了這里，關(guān)于史上最全的vue中組件之間的傳值方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！