在git命令行下，執(zhí)行以下命令完成環(huán)境的搭建：

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有岫巖免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1，npm install --global vue-cli 安裝vue命令行工具

2，vue init webpack vue-demo 使用vue命令生成一個(gè)webpack項(xiàng)目，項(xiàng)目名稱為vue-demo

3，cd vue-demo 切入項(xiàng)目

4，npm install安裝package.json中的所有依賴包

5，npm run dev運(yùn)行項(xiàng)目

一、父組件向子組件傳遞數(shù)據(jù)

然后刪除默認(rèn)的Hello.vue組件，把App.vue整理成以下樣子：

把router下面index.js文件修改如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
 }
 ]
})

1、在components目錄下創(chuàng)建一個(gè)子組件Child.vue

代碼如下：

2、把App.vue的代碼修改如下：

這樣就完成了父組件通過props屬性向子組件傳遞數(shù)據(jù)

也可以用v-bind綁定屬性

小結(jié)：

子組件在props中創(chuàng)建一個(gè)屬性，用以接收父組件傳過來的值

父組件中調(diào)用子組件

在子組件標(biāo)簽中綁定子組件props中創(chuàng)建的屬性

把需要傳給子組件的值賦給該屬性，如我們上文中父組件的msg

二、子組件向父組件傳遞數(shù)據(jù)

1，把Child.vue修改如下：

子組件通過$emit發(fā)送一個(gè)自定義的事件ParentRecEv， 后面參數(shù)是內(nèi)容

2，App.vue修改如下

在第二個(gè)子組件監(jiān)聽事件ParentRecEv，當(dāng)子組件點(diǎn)擊按鈕就會(huì)觸發(fā)這個(gè)自定義事件，然后觸發(fā)showMsg函數(shù)，就能收到子組件傳遞的數(shù)據(jù)，沒有綁定自定義事件是不能收到子組件發(fā)送的信息的.

小結(jié)：

子組件中通過$emit觸發(fā)一個(gè)自定義事件

將需要傳的值作為$emit的第二個(gè)參數(shù)，該值會(huì)被父組件的方法接收到

在父組件中調(diào)用子組件并在子組件標(biāo)簽上綁定發(fā)送的自定義事件

他們的共同點(diǎn)就是有橋梁，子向父的橋梁是自定義事件$emit，父向子的橋梁是props中的屬性. 這就是他們之間傳遞數(shù)據(jù)的關(guān)鍵

以上這篇Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。