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

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

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

<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)
    }
}

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓