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

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

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>

这中方法涉及到js中的闭包，和this指向，了解其中原因，对在js中涉入不深的童鞋颇有收益。但通常实际使用还是推荐第一种方法，值得一提的是。如果在这种传值方法内，你在base_f中改变父组件的状态，是不会引起vue的报错的

3兄弟组件之间的传值

其是兄弟组件之间的传值，其是通过组合以上方法也可实现，先由子组件a传值个父组件，再由父组件传值给b组件。

不过这样未免太过麻烦，所有这个时候，如果能够有一个管理共用状态的loader就是非常必要了，没错这就是vuex

原文地址：https://www.cnblogs.com/wrhbk/p/11668946.html