,可以通过以下步骤实现:
// 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
数据发生变化时,功能性组件会自动更新呈现函数内的数据。当点击功能性组件内的按钮时,会触发传递的事件处理函数。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云