Vue子組件與父組件之間的通信

fredshare 發布于2019-08-23 10:43 / 3468人閱讀

摘要：子組件通過就可以接受到這個父組件傳遞的值。點擊向父組件傳值在父組件中的標簽中監聽該自定義事件，并添加一個響應該事件的方法。

1.環境搭建

下載 vue-cli：npm install -g vue-cli

初始化項目：vue init webpack vue-demo

進入vue-demo文件夾：cd vue-demo

下載安裝依賴：npm install

運行該項目：npm run dev

2.父組件向子組件傳值

src/components/文件夾下建一個組件，Home.vue

創建子組件，在src/components/文件夾下新建一個文件夾，在新建文件夾中新建一個組件Child.vue

在Child.vue中創建props，用于接收父組件傳遞的值

在Home.vue中注冊Child組件，并在template的div標簽中添加home-child標簽，標簽中使用v-bind指令綁定c。子組件通過props就可以接受到這個父組件傳遞的值。

結果

3.子組件向父組件傳值

給按鈕綁定點擊事件ChildClick
在事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數，這個參數就是子組件要傳遞給父組件的值。

在父組件中的home-child標簽中監聽該自定義事件，并添加一個響應該事件的方法ShowChild。

結果：

點擊按鈕后：

云服務器 GPU云服務器組件之間通信 vue組件子組件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96615.html

Vue子組件與父組件之間的通信

摘要：子組件通過就可以接受到這個父組件傳遞的值。點擊向父組件傳值在父組件中的標簽中監聽該自定義事件，并添加一個響應該事件的方法。 1.環境搭建下載 vue-cli：npm install -g vue-cli 初始化項目：vue init webpack vue-demo 進入vue-demo文件夾：cd vue-demo 下載安裝依賴：npm install 運行該項目：npm...

fish 2019-08-02 11:09 評論0 收藏0
vue父子組件間通信

摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。父子通信目前有四種方式： 1.父組件傳遞數據給子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數據:方式1：props: [childMs...

617035918 2019-08-23 11:51 評論0 收藏0
在vue-cli中組件通信

摘要：一父傳子組件通信拿當父組件，當子組件父組件中導入子組件子組件導出在父組件中注冊子組件子組件通過來接收數據二子與父組件通信子組件主動觸發方法，為向父組件傳遞的數據父組件監聽子組件觸發的事件然后調用方法二非父子組件通信把當作一個中轉站組一.父傳子組件通信 showImg(https://segmentfault.com/img/bV0l1v?w=168&h=134); 拿app.vue當...

cgspine 2019-08-22 11:18 評論0 收藏0
Vue.js 父子組件及非父子組件間實現通信

摘要：想使用值的話通過進行處理非父子組件間通信創建事件中心組件觸發組件接收 1. 父組件與子組件通信父組件showImg(https://segmentfault.com/img/remote/1460000013945460); 子組件通過props來接收數據: 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

lentrue 2019-08-22 15:40 評論0 收藏0
前端知識點總結——VUE（持續更新中）

摘要：前端知識點總結持續更新中框架和庫的區別框架有著自己的語法特點都有對應的各個模塊庫專注于一點框架的好處提到代碼的質量，開發速度提高代碼的復用率降低模塊之間的耦合度高內聚低耦合思維模式的轉換從操作的思維模式切換到以數據為主概述是一個漸進式的構建前端知識點總結——VUE（持續更新中） 1.框架和庫的區別：框架：framework 有著自己的語法特點、都有對應的各個模塊庫 library ...

big_cat 2019-08-22 14:50 評論0 收藏0