vue将子组件方法传给父组件 test(a){ console.log(a) }
时间: 2023-12-27 19:48:18 浏览: 56
vue 子组件和父组件传值的示例
可以使用 `v-on` 或 `@` 语法将子组件中的方法绑定到父组件中,然后在父组件中调用子组件的方法。示例代码如下:
子组件代码:
```vue
<template>
<div>
<button @click="handleClick">点击按钮</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('test', 'hello world')
}
}
}
</script>
```
父组件代码:
```vue
<template>
<div>
<ChildComponent @test="handleTest"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent,
},
methods: {
handleTest(a) {
console.log(a) // 输出 'hello world'
}
}
}
</script>
```
在子组件中,我们定义了一个 `handleClick` 方法,当按钮被点击时,调用 `$emit` 方法触发 `test` 事件,并传递参数 `'hello world'`。
在父组件中,我们使用 `v-on` 或 `@` 语法将子组件的 `test` 事件绑定到 `handleTest` 方法上。当子组件触发 `test` 事件时,父组件会调用 `handleTest` 方法,并将子组件传递的参数作为参数传递进去。
阅读全文