,可以通过以下步骤实现:
// FunctionalComponent.vue
<template functional>
<div>
<p>{{ props.data }}</p>
<button @click="props.onClick">Click me</button>
</div>
</template>
// ParentComponent.vue
<template>
<div>
<functional-component :data="message" :onClick="handleClick" />
</div>
</template>
<script>
import FunctionalComponent from './FunctionalComponent.vue';
export default {
components: {
FunctionalComponent,
},
data() {
return {
message: 'Hello, World!',
};
},
methods: {
handleClick() {
console.log('Button clicked!');
},
},
};
</script>
在上述示例中,父组件ParentComponent
通过:data="message"
将message
数据传递给功能性组件,并通过:onClick="handleClick"
将handleClick
方法传递给功能性组件。
props
对象来访问传递的数据和事件处理函数。在功能性组件的呈现函数内,可以通过props.data
访问传递的数据,通过props.onClick
访问传递的事件处理函数。
这样,当父组件的message
数据发生变化时,功能性组件会自动更新呈现函数内的数据。当点击功能性组件内的按钮时,会触发传递的事件处理函数。
推荐的腾讯云相关产品和产品介绍链接地址:
云+社区沙龙online [腾讯云中间件]
云+社区沙龙online [国产数据库]
云+社区沙龙online
腾讯云GAME-TECH沙龙
云+社区技术沙龙[第22期]
云+社区技术沙龙[第1期]
云+社区沙龙online第6期[开源之道]
Techo Day 第二期
领取专属 10元无门槛券
手把手带您无忧上云