快捷導(dǎo)航

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

更新時(shí)間：2017年09月14日 08:02:35 作者：ghostwu

下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: