vue2.0父子組件通訊的方法

vue2.0組件通訊方法：props傳值和emit監聽。（.sync方法已經移除。詳情請點擊）（dispatch-和-broadcast方法也已經廢棄）

props方法傳值：Props 如今只能單項傳遞。爲了對父組件產生反向影響，子組件須要顯式地傳遞一個事件而不是依賴於隱式地雙向綁定。props方法傳值比較簡單，缺點是屬性會比較多。

（1）父傳子 [ props傳值 ]

<template>
  <div>
　　　 <input type="text" v-model="name"/>　
      <myname :test-name="name"></myname>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return {
        name:"lihua"
      }
    },
    components:{
      myname:{
         props:['testName'],
         template:"<h4>{{testName}}</h4>"
      }
    }
  }
</script

這裏須要注意的是testName 用的駝峯寫法，若是是駝峯寫法，上面的組件裏面就應該是用「-」鏈接，即：test-name

 

（1）子傳父 [ 使用$emit和$on進行父子組件之間的數據傳輸 ]，也能夠進行兄弟組件的傳值，原理同樣。

• 監聽：$on(eventName)

• 觸發：$emit(eventName)

<template>
  <div>
      <input type="text" v-model="name"/>
      <myname></myname>
  </div>
</template>
<script type="text/javascript">
import Vue from 'vue'
//準備一個空的實例對象，若是不定義，用this的話，this指向當前組件，達不到效果
//在簡單的場景下，你能夠使用一個空的 Vue 實例來做爲中央事件總線（event bus）:
 var newOption=new Vue();
  export default{
    data(){
      return {
        name:"lihua"
      }
    },
    mounted(){
       newOption.$on('test',mag=>{
            this.name=mag
       })
    },
    components:{
      myname:{
        data(){
          return {
            testName:"張三"
          }
        },
         template:"<div><p>{{testName}}</p><button @click='childEdit'>修改</button></div>",
         methods:{
            childEdit:function(){
              newOption.$emit('test',this.testName)
            }
         }
      }
    }
  }
</script>