一 環境搭建

步驟 1 開啟git，執行npm  install --global vue-cli 這是安裝vue的命令列

        2 vue init webpack vue-demo 這是vue基於webpack的模組專案

        3 cd vue-demo 進入vue-demo資料夾

        4 npm intall 安裝packjson.json中依賴的node_modules

        5 npm run dev 執行該專案

二   專案建立

       1、進入demo頁面，刪除模組專案中hello.vue，和 app.vue中的hello.vue元件的註冊和引用，此時app.vue應該是這樣的

<template>
   <div id="app">
   </div>
</template>

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

     一、父元件向子元件傳值

         1、建立子元件，在src/compents/資料夾下新建一個Child.vue

         2、 Child.vue中建立props和對應的名為message屬性

<template>
   <div>
       <h2>child子元件部分</h2>
       <p>{{message}}</p>
   </div>
</template>

<script>
export default {
   props : ['message']
}
</script>

<style>
</style> 
 

          3、在App.vue註冊Child元件，並在template中加入child標籤，標籤中新增message屬性並賦值

<template>
   <div id="app">
       <child message="hello"></child>
   </div>
</template>

<script>

import child from './components/Child'
export default {

   name : 'app'
   components:{

      child
 

   }
}
</script>

<style>
</style> 

            4、儲存修改的檔案，檢視瀏覽器

            child子元件部分

            hello 

         5 、我們還可以對message的值進行v-bind動態繫結

<template>
   <div id="app">
      <child v-bind:message="parentMsg"></child>
   </div>
</template>

<script>

import child from './components/Child';
export default {

   name : 'app',
   data(){

      return {

         parentMsg:"hello,child"

      }
   },

   components:{

      child

   }

}
</script>

<style>
</style> 

    child子元件部分

    hello,child

父元件向子元件傳值成功

總結如下：

    子元件在props中建立一個屬性，用以接收父元件傳過來的值

    父元件中註冊子元件

    在子元件標籤中新增子元件props中建立的屬性

    把需要傳給子元件的值賦值給該屬性

二.子元件向父元件傳值

1.在子元件中建立一個按鈕，給按鈕繫結一個點選事件

2.在響應該點選事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數

3.在父元件中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法

4.儲存修改的檔案，在瀏覽器中點選按鈕

子元件向父元件傳值成功 總結一下：

• 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應自定義事件的方法
• 在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽

在通訊中，無論是子元件向父元件傳值還是父元件向子元件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。

抓準這兩點對於父子通訊就好理解了