码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:mode   管理   应用   搜索   实现   自定义事件   data   log   watch   

 

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

 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

 

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

标签:mode   管理   应用   搜索   实现   自定义事件   data   log   watch   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!