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

Posted 2020-09-28 小坦克-进攻者

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>