站長(zhǎng)資訊網(wǎng)vue父子組件間如何進(jìn)行通訊？下面本篇文章給大家介紹一下父組件將數(shù)據(jù)傳給子組件、子組件將數(shù)據(jù)傳給父組件的方法，希望對(duì)大家有所幫助！
每一個(gè)組件中的變量和數(shù)據(jù)都是獨(dú)立的，如果別的組件想要訪問另一個(gè)組件里的數(shù)據(jù)該怎么做？
如何解決組件之間通訊呢？
解決方案：
可以采用父組件傳數(shù)據(jù)給子組件，還可以子組件傳數(shù)據(jù)給父組件。簡(jiǎn)稱父?jìng)髯?，子傳父。（學(xué)習(xí)視頻分享：vue視頻教程）
下面詳細(xì)說說父組件是如何將數(shù)據(jù)傳給子組件的。
父?jìng)髯?/strong>
理論：如果一個(gè)組件A引入并使用了另一個(gè)組件B時(shí),那么組件A就是父組件，組件B就是子組件。
實(shí)現(xiàn)過程:
1.在父組件中引入子組件、注冊(cè)子組件、使用子組件 2.在父組件中的子組件標(biāo)簽上自定義一個(gè)屬性 左邊是定義的名稱，右邊是父組件中的數(shù)據(jù) 例如 <MyCon :list="list" /> 3.在子組件中用prpos接收父組件傳來的數(shù)據(jù) 例如：prpos:['list'] 注意這里面的名稱必須要和父組件 定義的名稱一致才能可以。
原理圖示
父組件 Footer.vue
在父組件中的子組件標(biāo)簽上自定義一個(gè)屬性
<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">點(diǎn)擊修改props的值</button> </div> </template> <script> export default { // 子組件接收父組件傳來的數(shù)據(jù) props: ["name", "age"], methods: { fn() { this.name = "傻逼譚磊"; this.age = 20 }, }, }; </script>
小案例 采用了父?jìng)髯?/span>
父組件 App.vue
<template> <div style="border: 1px solid #ccc; margin: 5px; padding: 5px"> <h1>父組件</h1> <!-- 1. 父?jìng)?。自定義屬性 --> <MyProduct v-for="item in list" :key="item.id" :price="item.proprice" :info="item.info" :goodname="item.proname" /> </div> </template> <script> // 導(dǎo)入->注冊(cè)->使用 import MyProduct from "./MyProduct.vue"; export default { data() { return { list: [ { id: 1, proname: "超級(jí)好吃的棒棒糖", proprice: 18.8, info: "開業(yè)大酬賓, 全場(chǎng)8折", }, { id: 2, proname: "超級(jí)好吃的大雞腿", proprice: 34.2, info: "好吃不膩, 快來買啊", }, { id: 3, proname: "超級(jí)無敵的冰激凌", proprice: 14.2, info: "炎熱的夏天, 來個(gè)冰激凌了", }, ], }; }, components: { MyProduct }, }; </script> <style> </style>
子組件 MyProduct.vue
<template> <div style="border: 1px solid #ccc; margin: 5px; padding: 5px"> <h2>標(biāo)題： {{ goodname }}</h2> <p>價(jià)格: {{ price }}元</p> <p>{{ info }}</p> </div> </template> <script> export default { props: ["goodname", "price", "info"], }; </script> <style> </style>
效果展示
子傳父
實(shí)現(xiàn)過程
1.在父組件中引入子組件、注冊(cè)子組件、使用子組件 2.在父組件的子組件標(biāo)簽上加一個(gè)事件監(jiān)聽 例如: <MyCon @abc="fn" /> 3.在子組件中觸發(fā)這個(gè)自定義的監(jiān)聽事件。例如:this.$emit("abc",參數(shù))
原理圖示
父組件 App.vue
在父組件的子組件標(biāo)簽上加一個(gè)事件監(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ā)這個(gè)自定義的監(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>
商品案例 運(yùn)用了子傳父
父組件 App.vue
<template> <div style="border: 1px solid #ccc; margin: 5px; padding: 5px"> <h1>父組件</h1> <!-- 1. 父?jìng)?。自定義屬性 --> <!-- 添加自定義事件 --> <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)入->注冊(cè)->使用 import MyProduct from "./MyProduct.vue"; export default { data() { return { list: [ { id: 1, proname: "超級(jí)好吃的棒棒糖", proprice: 18.8, info: "開業(yè)大酬賓, 全場(chǎng)8折", }, { id: 2, proname: "超級(jí)好吃的大雞腿", proprice: 34.2, info: "好吃不膩, 快來買啊", }, { id: 3, proname: "超級(jí)無敵的冰激凌", proprice: 14.2, info: "炎熱的夏天, 來個(gè)冰激凌了", }, ], }; }, components: { MyProduct }, methods: { fn(obj) { console.log("父組件,收到了pdd事件", obj); // 計(jì)算砍了幾元 相減 再進(jìn)行重新賦值 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>價(jià)格: {{ price }}元</p> <p>{{ info }}</p> <button @click="bargain">隨機(jī)砍價(jià)</button> </div> </template> <script> export default { // 子接收 props: ["goodname", "price", "info", "idx"], methods: { bargain() { // 隨機(jī)數(shù)字 const ran = Math.ceil(Math.random() * 10); // 觸發(fā)自定義事件 // 為了知道具體是哪個(gè)商品要減少價(jià)格，所以要回傳idx下標(biāo) this.$emit("pdd", { idx: this.idx, ran }); }, }, }; </script> <style> </style>
效果展示
（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）
