vue2组件传值子传父函数名参数
时间: 2023-10-13 14:24:37 浏览: 85
vue父子组件传值案例
在 Vue2 中,如果要在子组件中向父组件传递函数名参数,可以使用 `$emit`。具体步骤如下:
1. 在父组件中定义一个方法,用于处理子组件传递过来的参数:
```javascript
methods: {
handleChildData(data) {
console.log(data);
}
}
```
2. 在父组件的模板中,使用子组件,并将父组件的方法作为参数传递给子组件:
```html
<template>
<div>
<my-component :parentFunc="handleChildData"></my-component>
</div>
</template>
```
3. 在子组件中,定义一个方法,用于处理传递给父组件的参数:
```javascript
methods: {
handleClick() {
this.$emit('childData', 'hello world');
}
}
```
4. 在子组件的模板中,使用 `$emit` 方法触发事件,并将需要传递给父组件的参数作为第二个参数传递进去:
```html
<template>
<div>
<button @click="handleClick">传递数据给父组件</button>
</div>
</template>
```
5. 最后,在父组件中监听子组件触发的事件,并在事件处理方法中调用父组件的方法,并将子组件传递过来的参数作为参数传递给父组件的方法:
```javascript
<template>
<div>
<my-component @childData="parentFunc"></my-component>
</div>
</template>
```
阅读全文