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>