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