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