2024年03月30日 vue 子传父 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)
}
}本文链接：http://so.lmcjl.com/news/734/