詳細聊聊vue組件是如何實現(xiàn)組件通訊的
更新時間：2022年05月14日 16:09:22 作者：前端卷王小y
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下
前言
每一個組件中的變量和數(shù)據(jù)都是獨立的，如果別的組件想要訪問另一個組件里的數(shù)據(jù)該怎么做？
如何解決組件之間通訊呢？
解決方案：
可以采用父組件傳數(shù)據(jù)給子組件，還可以子組件傳數(shù)據(jù)給父組件。簡稱父傳子，子傳父。
下面詳細說說父組件是如何將數(shù)據(jù)傳給子組件的。
父傳子
理論：如果一個組件A引入并使用了另一個組件B時,那么組件A就是父組件，組件B就是子組件。
實現(xiàn)過程:
1.在父組件中引入子組件、注冊子組件、使用子組件
2.在父組件中的子組件標(biāo)簽上自定義一個屬性 左邊是定義的名稱，右邊是父組件中的數(shù)據(jù) 例如
<MyCon :list="list" />
3.在子組件中用prpos接收父組件傳來的數(shù)據(jù) 例如：prpos:['list'] 注意這里面的名稱必須要和父組件
定義的名稱一致才能可以。
原理圖示
父組件 Footer.vue
在父組件中的子組件標(biāo)簽上自定義一個屬性
<template>
<div>
<h1>父組件傳子組件</h1>
<!-- 使用組件 自定義屬性 -->
<MyCon :name="name" :age="age" />
</div>
</template>
<script>
// 引入組件 --> 創(chuàng)建組件 --> 使用組件
// 引入組件
import MyCon from "./MyCon.vue";
export default {
// 創(chuàng)建組件
components: { MyCon },
// 數(shù)據(jù)
data() {
return {
name: "張三",
age: 38,
};
},
};
</script>子組件 MyCon.vue
在子組件中用prpos接收父組件傳來的數(shù)據(jù)
<template>
<div>
<h2>子組件</h2>
// 直接在標(biāo)簽中使用
<p>{{ name }} {{ age }}</p>
<button @click="fn">點擊修改props的值</button>
</div>
</template>
<script>
export default {
// 子組件接收父組件傳來的數(shù)據(jù)
props: ["name", "age"],
methods: {
fn() {
this.name = "傻逼譚磊";
this.age = 20
},
},
};
</script>小案例 采用了父傳子
父組件 App.vue
<template>
<div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
<h1>父組件</h1>
<!-- 1. 父傳。自定義屬性 -->
<MyProduct
v-for="item in list"
:key="item.id"
:price="item.proprice"
:info="item.info"
:goodname="item.proname"
/>
</div>
</template>
<script>
// 導(dǎo)入->注冊->使用
import MyProduct from "./MyProduct.vue";
export default {
data() {
return {
list: [
{
id: 1,
proname: "超級好吃的棒棒糖",
proprice: 18.8,
info: "開業(yè)大酬賓, 全場8折",
},
{
id: 2,
proname: "超級好吃的大雞腿",
proprice: 34.2,
info: "好吃不膩, 快來買啊",
},
{
id: 3,
proname: "超級無敵的冰激凌",
proprice: 14.2,
info: "炎熱的夏天, 來個冰激凌了",
},
],
};
},
components: { MyProduct },
};
</script>
<style>
</style> 子組件 MyProduct.vue
<template>
<div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
<h2>標(biāo)題： {{ goodname }}</h2>
<p>價格: {{ price }}元</p>
<p>{{ info }}</p>
</div>
</template>
<script>
export default {
props: ["goodname", "price", "info"],
};
</script>
<style>
</style>效果展示
子傳父
實現(xiàn)過程
1.在父組件中引入子組件、注冊子組件、使用子組件
2.在父組件的子組件標(biāo)簽上加一個事件監(jiān)聽 例如: <MyCon @abc="fn" />
3.在子組件中觸發(fā)這個自定義的監(jiān)聽事件。例如:this.$emit("abc",參數(shù))
原理圖示
父組件 App.vue
在父組件的子組件標(biāo)簽上加一個事件監(jiān)聽 用形參接收數(shù)據(jù)
<template>
<div>
<h1>父組件</h1>
<!-- 1.添加事件監(jiān)聽 -->
<!-- 當(dāng)子組件發(fā)生了abc事件要執(zhí)行fn函數(shù) -->
<MyCon @abc="fn" />
</div>
</template>
<script>
// 引入子組件
import MyCon from "./MyCon.vue";
export default {
methods: {
// 形參接收
fn(obj) {
// 打印查看有沒有獲取到
console.log("fn發(fā)生了abc事件", obj);
},
},
components: { MyCon },
};
</script>子組件 MyCon.vue
在子組件中觸發(fā)這個自定義的監(jiān)聽事件
<template>
<div>
<h2>子組件</h2>
<button @click="ConFn">子傳父</button>
</div>
</template>
<script>
export default {
methods: {
ConFn() {
console.log("子組件click");
// 2.觸發(fā)abc事件
this.$emit("abc", { name: "吊毛譚磊" });
},
},
};
</script>商品案例 運用了子傳父
父組件 App.vue
<template>
<div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
<h1>父組件</h1>
<!-- 1. 父傳。自定義屬性 -->
<!-- 添加自定義事件 -->
<MyProduct
v-for="(item, idx) in list"
:idx="idx"
:key="item.id"
:price="item.proprice"
:info="item.info"
:goodname="item.proname"
@pdd="fn"
/>
</div>
</template>
<script>
// 導(dǎo)入->注冊->使用
import MyProduct from "./MyProduct.vue";
export default {
data() {
return {
list: [
{
id: 1,
proname: "超級好吃的棒棒糖",
proprice: 18.8,
info: "開業(yè)大酬賓, 全場8折",
},
{
id: 2,
proname: "超級好吃的大雞腿",
proprice: 34.2,
info: "好吃不膩, 快來買啊",
},
{
id: 3,
proname: "超級無敵的冰激凌",
proprice: 14.2,
info: "炎熱的夏天, 來個冰激凌了",
},
],
};
},
components: { MyProduct },
methods: {
fn(obj) {
console.log("父組件,收到了pdd事件", obj);
// 計算砍了幾元 相減 再進行重新賦值
this.list[obj.idx].proprice -= obj.ran;
},
},
};
</script>
<style>
</style>子組件 MyProduct.vue
<template>
<div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
<h2>標(biāo)題： {{ goodname }}</h2>
<p>價格: {{ price }}元</p>
<p>{{ info }}</p>
<button @click="bargain">隨機砍價</button>
</div>
</template>
<script>
export default {
// 子接收
props: ["goodname", "price", "info", "idx"],
methods: {
bargain() {
// 隨機數(shù)字
const ran = Math.ceil(Math.random() * 10);
// 觸發(fā)自定義事件
// 為了知道具體是哪個商品要減少價格，所以要回傳idx下標(biāo)
this.$emit("pdd", { idx: this.idx, ran });
},
},
};
</script>
<style>
</style>效果展示
總結(jié)
到此這篇關(guān)于vue組件是如何實現(xiàn)組件通訊的文章就介紹到這了,更多相關(guān)vue實現(xiàn)組件通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項目方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3中Element-Plus分頁(Pagination)組件的使用
Element-Plus分頁(Pagination)組件在開發(fā)過程中數(shù)據(jù)展示會經(jīng)常使用到,同時分頁功能也會添加到頁面中,下面我們就來學(xué)習(xí)一下它的具體使用,需要的可以參考一下2023-11-11
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實現(xiàn)微信公眾號菜單編輯器功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時間開發(fā)中上傳文件是經(jīng)常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08
使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)
這篇文章主要介紹了使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue-awesome-swiper滑塊插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
這篇文章主要介紹了vue.js計算屬性computed用法,結(jié)合實例形式分析了vue.js使用computed方式進行屬性計算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07