专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

vue中子级页面给父级如何传值,VUE子传父

作者:鹏仔先生日期:2020-08-04浏览:2584分类:JavaScript


结合之前文章,自定义子组件的使用,来实现一个子传父的功能,功能很简单,点击子级页面按钮,将值传递给父级中。


首先,我们需要在子组件中,设置一个点击按钮

<button @click="GetBtn()">点击按钮</button>


接着在JS中,data定义一个参数ConKey,在点击事件中,使用$emit进行传参

export default {
  name: 'childer',
  data () {
    return {
        ConKey: '我是子组件传给父级的内容'
    }
  },
  methods: {
      GetBtn(){
          this.$emit("GetKey",this.ConKey)
      }
  }
}


最后,我们在父级页面中的子组件标签写上 v-on:GetKey="GetCon",命名自行定义,对应即可

<childer v-on:GetKey="GetCon"></childer>

并在js中写入如下

methods: {
    GetCon(val){
        alert('子组件向爸爸传来的值' + val)
    }
}


手机扫码访问

已有1位网友发表了看法:

取消回复欢迎 发表评论:

关灯