vue子组件如何向父组件传值（vue中子组件使用emit向父组件传值）
<template>
<!--绑定自定义事件-->
<HelloWorld @custE="getCData"/>
</template>
<script>
// 引入子组件
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
// 注册子组件
HelloWorld
},
methods: {
// 获取子组件传来的数据
getCData(value) {
console.log(value);
}
}
}
</script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>，我来为大家科普一下关于vue子组件如何向父组件传值?以下内容希望对你有帮助!
vue子组件如何向父组件传值
父组件代码
<template>
<!--绑定自定义事件-->
<HelloWorld @custE="getCData"/>
</template>
<script>
// 引入子组件
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
// 注册子组件
HelloWorld
},
methods: {
// 获取子组件传来的数据
getCData(value) {
console.log(value);
}
}
}
</script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<template>
<div class="hello" @click="twoE"></div>
</template>
<script>
export default {
data() {
return {
childData: 'childData111'
}
},
methods: {
twoE() {
// 使用$emit向父组件传值
this.$emit('custE',this.childData);
},
}
}
</script>
<style scoped>
.hello {
width: 100px;
height: 100px;
background: red;
}
</style>
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
