vue 学习五深入了解components（父子组件之间的传值）

时间：2019-10-13 23:45:51 阅读：260 评论：0 收藏：0 [点我收藏+]

上一章记录了如何在父组件中向子组件传值，但在实际应用中，往往子组件也要向父组件中传递数据，那么此时我们应该怎么办呢

1.在父组件内使用v-on监听子组件事件，并在子组件中使用$emit传递数据

//父组件
<template>
  <div id="home">
    <com test=‘12345‘ test2=‘1213232111111‘ @a_even="a_even"></com> //使用v-on监听子组件事件 @为v-on缩写
  </div>
</template>

<script>
import com from "../components/a_component";
export default {
  name: "home",
  components: {
   com
  },
  methods: {
    a_even(e){
      console.log(‘even‘,e) //e的值，就为子组件内，a_even事件的事件参数
    }
  }
};
</script>

//子组件
<template>
  <div class="a_component-wrap">
    <h1>
      {{a1}}
    </h1>
    <input v-model="a1"/>
  </div>
</template>

<script>
export default {
  name: "AComponent",
  data(){
    return{
      a1:‘123‘
    }
  },
  watch:{
    a1(){   //当a1的值改变时 触发a_even自定义事件，并将this.al作为事件参数
      let vm=this;
      vm.$emit(‘a_even‘,vm.a1)
    }
  }
};
</script>

2.在vue中，凡是在methods中定义的方法的this，都指向当前组件实例，可以利用这个特性，在props中传递一个带参的方法

//父组件
<template>
  <div id="home">
    <com :base_f="base_f"></com> //讲base_f当作props参数传递至子组件
  </div>
</template>

<script>
import com from "../components/a_component";
export default {
  name: "home",
  components: {
   com
  },
  methods: {
    base_f(option){//在methods中定义的方法，不管在哪里调用this的指向，都是定义时的实列，这是因为在methods中定义方法时，会对方法使用js的 bind（）感兴趣的同学可以自行搜索，再次就不多说
      console.log(option) //打印的是子组件调用base_f传入的参数
      console.log(this) // 打印的是当前父组件的实例

    }
  }
};
</script>

<template>
  <div class="a_component-wrap">
    <h1>
      {{a1}}
    </h1>
    <input v-model="a1"/>
  </div>
</template>

<script>
export default {
  name: "AComponent",
  props:{
    base_f:{
      type:Function,//定义接收的props
    }
  },
  data(){
    return{
      a1:""
    }
  },
  watch:{
    a1(){
      let vm=this;
      this.base_f(vm.a1);//在子组件中使用传递过来的base_f方法，并传入子组件中的参数a1
    }
  }
};
</script>