Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:30:13

Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)

Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解):在git命令行下，執(zhí)行以下命令完成環(huán)境的搭建： 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 in

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解):在git命令行下，執(zhí)行以下命令完成環(huán)境的搭建： 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 in

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

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整理成以下樣子：

<template>
 <div id="app">
 這是一個(gè)空的app
 </div>
</template>

<script>
 export default {
 name : 'app'
 }
</script>

<style>

</style>

把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

代碼如下：

<template>
 <div>
 <h3>這是子組件</h3>
 <p>{{content}}</p>
 </div>
</template>
<script>
export default {
 props : ['content']
}
</script>

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

<template>
 <div id="app">
 <child :content="msg"></child>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
 return {
 'msg' : '這是來(lái)自父組件的問(wèn)候'
 }
 },
 components : {
 child
 }
 }
</script>

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

也可以用v-bind綁定屬性

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg"></child>
 </div>
</template>

小結(jié)：

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

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

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

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

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

1，把Child.vue修改如下：

<template>
 <div>
 <h3>這是子組件</h3>
 <p>{{content}}</p>
 <p>
 <input type="button" value="告訴父王一個(gè)消息" v-on:click="send">
 </p>
 </div>
</template>
<script>
export default {
 props : ['content'],
 methods : {
 send(){
 this.$emit( 'ParentRecEv', "父王,孩兒正在跟ghostwu學(xué)習(xí)vue2.0" )
 }
 }
}
</script>

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

2，App.vue修改如下

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg" v-on:ParentRecEv="showMsg"></child>
 <p>{{data}}</p>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
 return {
 'msg' : '這是來(lái)自父組件的問(wèn)候',
 data : ''
 }
 },
 methods : {
 showMsg( msg ){
 this.data = msg;
 }
 },
 components : {
 child
 }
 }
</script>

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

小結(jié)：

子組件中通過(guò)$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í)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com