Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法

青灯夜游

Nov 30, 2021 pm 07:41 PM

vue父子組件通信組件通信

Vue中父子元件間怎麼通訊？以下這篇文章就來帶大家了解Vue父子元件通信，介紹一下父向子傳值和子向父傳值的方法，希望對大家有所幫助。

Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法

Vue父子元件

什麼是父子元件？

在一個元件中引入另一個元件，被引入的就叫做子元件，因為vue的模組化，會把有公共的部分單獨抽成一個模組，不會把所有頁面內容寫在一個vue檔案下，因為模組化的原因，避免不了兩個模組之間的通訊問題，這時候就有了模組（組件）之間的資料傳遞問題。【相關推薦：《vue.js教學》】

Vue父子元件通訊

在vue中常會一個元件常會用到另一個元件的資料或者方法，這時候就有了父子元件之間的通訊問題

Vue 父傳子

#1.先看程式碼，講解在下面

<body>
//父组件
<div id="app">
    <cpn3 :ctitle="title"></cpn3>
</div>
//子组件
<template id="cpn3">
    <div>
        <h1 id="ctitle">{{ctitle}}</h1>
        <p>orange</p>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
                type: String,
                default () {
                    return {}
                }
            }
        }
    })
	//父组件
    const app = new Vue({
        el: "#app",
        data: {
            title: &#39;orange&#39;
        },
        methods: {},

    })
</script>
</body>

講解：
1.先寫出基本的模板分離元件

2.在子元件中加入props屬性，用物件方式，，在props裡面可以寫你需要傳遞的參數，參數也用物件方式，程式碼比較清晰，###

    //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
            //参数也使用对象形式，type传类型  default函数，是在找不到参数时返回一个值显示
                type: String,
                default () {
                    return {}
                }
            }
        }
    })

2.然後在父元件中加入需要的屬性

//父组件
    const app = new Vue({
        el: "#app",
        data: {
        //这里的title就是要传入子组件的属性  在父组件中定义
            title: &#39;orange&#39;
        },
        methods: {},

    })

3.在父元件中綁定兩個參數

 <div id="app">
	//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
    <cpn3 :ctitle="title"></cpn3>
</div>

4.最後在在子元件中要使用子元件定義的屬性名稱

//子组件
<template id="cpn3">
    <div>
    //这里的属性名为ctitle
        <h1 id="ctitle">{{ctitle}}</h1>
    </div>
</template>

Vue 子傳父

1.子傳父的意思就是，，子元件內容傳給父元件，，使父元件可以隨時使用子元件傳來的數據，使用方法為：自訂函數

1、首先我們來做一個仿淘寶側邊欄商品，點擊或滑鼠移動到上面這個圖片為例，我們來講一下元件傳遞的子傳父

#2.1我們將子元件和父元件分開先，挨個講先來看看子元件程式碼 Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法

<!-- 子组件 -->
<template id="cpn">
    <div>
        <h1 id="ctitle">{{ctitle}}</h1>
        <button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
    </div>
</template>
<script>
Vue.component("cpn", {
        template: &#39;#cpn&#39;,
        //父传子 props   
        props: {
            ctitle: {
                type: String,
                //找不到数据时
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                list: [{
                    id: &#39;phone&#39;,
                    name: &#39;手机&#39;
                }, {
                    id: &#39;tv&#39;,
                    name: &#39;电视&#39;
                }, {
                    id: &#39;p&#39;,
                    name: &#39;家电&#39;
                }, {
                    id: &#39;computer&#39;,
                    name: &#39;电脑&#39;
                }, ]
            }
        },
        //子传父 自定义事件
        methods: {
            // 自定义事件
            goodsclick(item) {
                this.$emit(&#39;itemclick&#39;, item)
            }
        }
    })
    </script>

講解：子元件就是寫出一個元件（html）包裝起來，而且可以隨時使用，也就相當於html一樣的，只是打包起來而已（這麼理解應該沒什麼問題）

#1.子元件和vue一樣有data，methods，這屬性所以在data中寫一個數組，然後用v-for的方式遍歷產生按鈕和正常寫法沒什麼差別，然後寫個函數，綁定點擊事件，並且將item，也就是數組傳入的對象傳入函數，

<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>

2.然後最重要，最關鍵的一步來了，就是在你綁定的點擊事件函數中，發射一個自訂函數給父元件，就是發送給父元件

methods: {
            // 自定义事件
            goodsclick(item) {
            //itemclick就是自定义函数，并且将item也传过去给父组件
                this.$emit(&#39;itemclick&#39;, item)
            }
        }

這就是子元件寫完，這是子元件的樣式，上圖所示

2、接下來講講父元件怎麼接收子元件傳來的自訂事件 Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法

<!-- 父组件 -->
<div id="app">
    <cpn :ctitle="title" @itemclick="cpnclick"></cpn>
</div>
<script>
//父组件    
    const app = new Vue({
        el: "#app",
        data: {
            title: "title",
        },
        methods: {
            cpnclick(item) {
                console.log("cpnclick", item);
            }
        }
    })
</script>

講解一下：你寫好了子元件就要調用，調用就是你的元件名稱作為標籤即可，，這裡是

<cpn :ctitle="title" @itemclick="cpnclick"></cpn>

在父元件中寫一個函數然後在裡面綁定從子元件傳過來的自定義事件，這樣就成功綁定子元件，這樣就完成子元件傳資料到父元件了本章完

更多程式相關知識，請造訪：

程式設計入門

！！

以上是Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

vue.js的功能：增強前端的用戶體驗Apr 19, 2025 am 12:13 AM

Vue.js通過多種功能提升用戶體驗：1.響應式系統實現數據即時反饋；2.組件化開發提高代碼復用性；3.VueRouter提供平滑導航；4.動態數據綁定和過渡動畫增強交互效果；5.錯誤處理機制確保用戶反饋；6.性能優化和最佳實踐提升應用性能。

vue.js：定義其在網絡開發中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web開發中的角色是作為一個漸進式JavaScript框架，簡化開發過程並提高效率。 1)它通過響應式數據綁定和組件化開發，使開發者能專注於業務邏輯。 2)Vue.js的工作原理依賴於響應式系統和虛擬DOM，優化性能。 3)實際項目中，使用Vuex管理全局狀態和優化數據響應性是常見實踐。

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年發布的漸進式JavaScript框架，用於構建用戶界面。它的核心優勢包括：1.響應式數據綁定，數據變化自動更新視圖；2.組件化開發，UI可拆分為獨立、可複用的組件。

Netflix的前端：React（或VUE）的示例和應用Apr 16, 2025 am 12:08 AM

Netflix使用React作為其前端框架。 1)React的組件化開發模式和強大生態系統是Netflix選擇它的主要原因。 2)通過組件化，Netflix將復雜界面拆分成可管理的小塊，如視頻播放器、推薦列表和用戶評論。 3)React的虛擬DOM和組件生命週期優化了渲染效率和用戶交互管理。

前端景觀：Netflix如何處理其選擇Apr 15, 2025 am 12:13 AM

Netflix在前端技術上的選擇主要集中在性能優化、可擴展性和用戶體驗三個方面。 1.性能優化：Netflix選擇React作為主要框架，並開發了SpeedCurve和Boomerang等工具來監控和優化用戶體驗。 2.可擴展性：他們採用微前端架構，將應用拆分為獨立模塊，提高開發效率和系統擴展性。 3.用戶體驗：Netflix使用Material-UI組件庫，通過A/B測試和用戶反饋不斷優化界面，確保一致性和美觀性。

React與Vue：Netflix使用哪個框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）

框架的選擇：是什麼推動了Netflix的決定？Apr 13, 2025 am 12:05 AM

Netflix在框架選擇上主要考慮性能、可擴展性、開發效率、生態系統、技術債務和維護成本。 1.性能與可擴展性：選擇Java和SpringBoot以高效處理海量數據和高並發請求。 2.開發效率與生態系統：使用React提升前端開發效率，利用其豐富的生態系統。 3.技術債務與維護成本：選擇Node.js構建微服務，降低維護成本和技術債務。