vue3父组件传点击事件的id给单独的子组件
时间: 2023-06-19 12:10:40 浏览: 72
可以使用 props 将父组件的数据传递给子组件,子组件接收到数据后可以在模板中使用。
在父组件中定义一个方法来处理点击事件,然后将需要传递的数据作为参数传递给子组件:
```html
<template>
<div>
<button @click="handleClick(1)">点击我</button>
<ChildComponent :id="clickedId" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
clickedId: null,
};
},
methods: {
handleClick(id) {
this.clickedId = id;
},
},
};
</script>
```
在子组件中通过 props 接收传递的数据,并在模板中使用:
```html
<template>
<div>
<p>点击的id是:{{ id }}</p>
</div>
</template>
<script>
export default {
props: {
id: {
type: Number,
required: true,
},
},
};
</script>
```
这样就可以实现父组件传递点击事件的id给单独的子组件了。