vue實現(xiàn)組件通信的八種方法實例
更新時間：2021年09月08日 15:27:56 作者：大鵬_yp
ue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
對于vue來說，組件之間的消息傳遞是非常重要的，下面是我對組件之間消息傳遞的常用方式的總結(jié)
1、props 父組件--->子組件通信
父組件---屬性的方式傳值給子組件
子組件---props方式接收數(shù)據(jù)
<Son :datas="fData"></Son>
<script>
import Son from '@/components/son'
export default{
name:'Father',
components:{Son},
data(){
return{
fData:'我是父組件向子組件傳遞的值-props方式'
}
}
}
</script>
子組件props接受的參數(shù)名稱，要與父組件傳遞時定義的屬性名一致
<template>
<div>我是父組件的數(shù)據(jù)：{{fData}}</div>
<div @click=changeData>我是父組件傳遞修改后的數(shù)據(jù)：{{mydata}}</div>
</template>
<script>
export default{
name:'Son',
props:{
fData:{
type:String,
default:''
}
}
data(){
mydata:this.fatherData
},
methods:{
changeData(){
this.mydata += '改變數(shù)據(jù)'
}
},
}
</script>
注意：
- 子組件不能夠直接去修改父組件傳遞的值修改的：因為Vue的單向數(shù)據(jù)流機制，如果直接修改那父組件的值就被“污染”了。(props是單向綁定的(只讀屬性)：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是反過來不會)
報錯信息大概是：vue使用prop通信出錯:Avoid mutating a prop directly since the value will be overwritten whenever the parent - 解決方案：可以在子組件內(nèi)定義一個變量mydata去接收fData數(shù)據(jù)
- 參數(shù)傳遞類型不確定是可以這么寫：
props:{
fData:{
type:[String,Number],
default:''
}
}
2、$emit 子組件--->父組件傳遞
- 子組件綁定自定義事件
- $emit()第一個參數(shù)為：自定義的事件名稱，第二個參數(shù)為：需要傳遞的數(shù)據(jù)
- 使用 $emit() 觸發(fā)更改數(shù)據(jù)
子組件
<el-button @click="handleEmit">改變父組件</el-button>
<script>
export default{
name:'Son',
methods:{
handleEmit(){
this.$emit('triggerEmit','子組件的數(shù)據(jù)')
}
}
}
</script>
父組件(子組件發(fā)送的事件名稱，要和父組件接受的事件名稱一致)
<Son @triggerEmit="changeData"></Son>
<script>
import Son from '@/components/son'
export default{
name:'Father',
components:{Son},
methods:{
changeData(name){
console.log(name) // => 我是來自子組件的數(shù)據(jù)
}
}
}
</script>
$emit與props結(jié)合 兄弟組件傳值
- 父組件引入兩個子組件
- 父組件充當(dāng)一個橋梁作用
父組件
<childA :myName="name"></ChildA>
<ChildB :myName="name" @changeName="editName"></ChildB>
export default{
data() {
return {
name: '數(shù)據(jù)你好'
}
},
methods: {
editName(name){
this.name = name
}
}
}
子組件B改變，接收數(shù)據(jù)
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default{
props: {
myName:String
},
methods: {
changeName() {
this.$emit('changeName', '新數(shù)據(jù)名稱')
}
}
}
</script>
子組件A接收數(shù)據(jù)
<p>姓名：{{ newName }}</p>
<script>
export default{
props: {
myName:String
}
}
</script>
3、bus(事件總線) 兄弟組件通信
非父子組件或更多層級間組件間傳值，在Vue中通過單獨的事件中心來管理組件間的傳值
- 創(chuàng)建一個公共的bus.js文件
- 暴露出Vue實例
- 傳遞數(shù)據(jù)方，通過一個事件觸發(fā)bus.$emit(方法名，傳遞的數(shù)據(jù))
- 接收數(shù)據(jù)方，在生命周期函數(shù)中，通過bus.$on(方法名,[params])來監(jiān)聽
- 銷毀事件，在接受數(shù)據(jù)方，通過bus.$off(方法名)銷毀之后無法監(jiān)聽數(shù)據(jù)
import Vue from "vue" const bus=new Vue() export default bus
需要改變數(shù)據(jù)的組件中定義調(diào)用
<template>
<div>
<div>我是通信組件A</div>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import bus from "@/utils/Bus.js";
export default {
components: {},
data() {
return {};
},
mounted() {
console.log(bus);
},
methods: {
changeName() {
bus.$emit("editName", "數(shù)據(jù)集！");
},
},
};
</script>
<style lang='scss' scoped>
</style>
另外一個組件中同樣引入bus.js文件，通過$on監(jiān)聽事件回調(diào)
<template>
<div>
<span>名稱：{{name}}</span>
<div>我是通信組件B</div>
</div>
</template>
<script>
import bus from "@/utils/Bus.js";
export default {
components: {},
data() {
return {name};
},
mounted() {
bus.$on("editName", (name) => {
this.name=name
console.log(name); //
});
},
methods: {},
};
</script>
<style lang='scss' scoped>
</style>
4、$parent、$children 直接訪問組件實例
- 子組件通過---> $parent 獲得父組件實例
- 父組件通過---> $children 獲得子組件實例數(shù)組
子組件---this.$parent可以獲取到父組件的方法、data的數(shù)據(jù)等，并可以直接使用和執(zhí)行
<template>
<div>我是子組件</div>
</template>
<script>
export default{
name:"Son",
data(){
return{
sonTitle: '我是子組件的數(shù)據(jù)'
}
},
methods:{
sonHandle(){
console.log('我是子組件的方法')
}
},
created(){
console.log(this.$parent)
console.log(this.$parent.fatherTitle) // => 我是父組件的數(shù)據(jù)
this.$parent.fantherHandle() // => 我是父組件的方法
}
}
</script>
父組件 --- 獲取子組件實例的，并且獲取的實例是一個數(shù)組形式,this.$children[0]才可以獲取某個組件實例,并調(diào)用組件方法和數(shù)據(jù)
<template>
<div>
<Son>我是父組件</Son>
</div>
</template>
<script>
import Son from './son.vue'
export default{
name: 'father',
components:{
Son
},
data(){
return{
fatherTitle: '我是父組件的數(shù)據(jù)'
}
},
methods:{
fantherHandle(){
console.log('我是父組件的方法')
}
},
mounted(){
console.log(this.$children)
console.log(this.$children[0].sonTitle) // => 我是子組件的數(shù)據(jù)
this.$children[0].sonHandle() // => 我是子組件的方法
}
}
</script>
5、$refs
ref被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。
父組件使用 $refs 獲得組件實例
<template>
<div>
<Son ref="son"></Son>
</div>
</template>
<script>
import Son from './son.vue'
export default{
name: 'father',
components:{
Son
},
mounted(){
console.log(this.$refs.son) /*組件實例*/
}
}
</script>
6、provide/inject(提供/注入) 多組件或深層次組件通信
- 父組件使用 provide 注入數(shù)據(jù)
- 子組件使用 inject 使用數(shù)據(jù)
/*父組件*/
export default{
provide: {
return{
provideName: '販賣前端仔'
}
}
}
至此provideName這個變量可以提供給它其下的所有子組件，包括曾孫、孫子組件等，只需要使用 inject 就能獲取數(shù)據(jù)
/*子組件*/
export default{
inject: ['provideName'],
created () {
console.log(this.provideName) // => "販賣前端仔"
}
}
- 父組件不需要知道哪個組件使用它提供出去的數(shù)據(jù)
- 子附件不需要知道這個數(shù)據(jù)從哪里來
7、slot（slot-scope作用域插槽） 子元素-->父元素（類似于通信）
- 用作一個 (能被傳遞數(shù)據(jù)的)可重用模板，來代替已經(jīng)渲染好的元素
- 在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像你將 prop 傳遞給組件一樣
- 注意：父級插槽接收內(nèi)容是最外側(cè)元素 ，必須要有屬性slot-scope
子元素
<template>
<div>
<div class="isSon">
<slot :info='arrList'></slot>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {arrList:[1,'aa','張三']};
},
mounted() {
},
methods: {
},
};
</script>
父元素
<template>
<div>
<SonG>
<span slot-scope="props">
<ul>
aa
<li v-for="item in props.info" :key="item">
{{item}}
</li>
</ul>
</span>
</SonG>
</div>
</template>
<script>
import SonG from '../components/SonG.vue'
export default {
components:{
SonG
},
data () {
return {
}
}
}
</script>
8、vuex狀態(tài)管理
相當(dāng)于一個公共數(shù)據(jù)的倉庫
提供一些方法管理倉庫數(shù)據(jù)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
總結(jié)
到此這篇關(guān)于vue實現(xiàn)組件通信的八種方法的文章就介紹到這了,更多相關(guān)vue實現(xiàn)組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時候面試官多多少少都會考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡單實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強大的功能之一，感興趣的小伙伴們可以參考一下2016-09-09
解決axios發(fā)送post請求上傳文件到后端的問題(multipart/form-data)
這篇文章主要介紹了如何使用axios發(fā)送post請求上傳文件到后端(multipart/form-data),本文給大家?guī)砹藛栴}原因及解決方案，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue 實現(xiàn)從文件中獲取文本信息的方法,結(jié)合實例形式詳細分析了vue.js基于export導(dǎo)出的文件信息讀取相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
uniapp如何打包到H5并成功發(fā)布,以及在打包過程中會遇到的坑如何解決,本文將一一講解,文中通過圖文結(jié)合的方式給大家講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-10-10
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁面空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue.js的Mixins功能允許封裝可復(fù)用的組件選項,實現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項,使用時,Mixins中的選項會被混入組件中,優(yōu)先級低于組件自身選項,優(yōu)點包括代碼復(fù)用、高靈活性和簡單易用2024-09-09
這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07