首页 > 代码库 > vue2.0父子组件通信的方法

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指向当前组件,达不到效果
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>

 

vue2.0父子组件通信的方法