vue父传子,子传父

父传子
父组件用v-bind绑定一个值,如

v-bind:selectColl = "selectCollect"

声明:

data (){
return {
selectCollect: ""
   }
}

在methods方法中给selectCollect赋值,如

this.selectCollect = ""

子组件中用props接受父组件绑定的值,如

props: {
selectCol: String
}

然后在子组件中使用使用接收到的该值,如

data (){
return {
activeTag: ""
   }
}
watch:{
selectCol (val){
this.activeTag = val
  }
}

子传父
先在子组件中定义一个方法,然后在子组件方法中使用this. e m i t , t h i s . emit,this. emitthis.emit有两个参数,第一个是"自定义函数",第二个就是传递的参数值,如

methods: {
submitChose: {
     this.$emit(event:"selectTag",args:data)}
}

然后在父组件中使用v-on来监听子组件方法中使用的this.$emit的自定义函数,如

v-on:selectTag="selectTagsss"
methods: {
selectTagsss: function(data){
      .......
  }
}

其实就相当于click事件,触发一个方法,那通过执行子组件中定义的方法从而触发this. e m i t 的 自 定 义 函 数 父 组 件 监 听 到 子 组 件 中 t h i s . emit的自定义 函数父组件监听到子组件中this. emitthis.emit自定义函数的触发,就会触发自身定义的方法,这个方法接收来自子组件的值。
另外,在父组件中也可能使用该方法:

methods: {
showTags: function(data){
      this.selectTagsss = "ss"
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值