vue父子組件間如何進行通訊？下面本篇文章給大家介紹一下父組件將數(shù)據(jù)傳給子組件、子組件將數(shù)據(jù)傳給父組件的方法，希望對大家有所幫助！

每一個組件中的變量和數(shù)據(jù)都是獨立的，如果別的組件想要訪問另一個組件里的數(shù)據(jù)該怎么做？

如何解決組件之間通訊呢？

解決方案：

可以采用父組件傳數(shù)據(jù)給子組件，還可以子組件傳數(shù)據(jù)給父組件。簡稱父傳子，子傳父。（學(xué)習(xí)視頻分享：vue視頻教程）

下面詳細(xì)說說父組件是如何將數(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>

效果展示

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）