vue2中子向父传值
时间: 2023-12-02 15:42:27 浏览: 165
在Vue2中,子组件向父组件传值可以通过以下两种方式实现:
1. 使用`$emit`方法触发父组件的自定义事件,并传递参数。
在子组件中使用`$emit`方法触发自定义事件,并传递参数,父组件通过`v-on`监听该事件并接收参数。
子组件中:
```javascript
this.$emit('custom-event', arg)
```
父组件中:
```html
<child-component v-on:custom-event="handleEvent"></child-component>
```
```javascript
methods: {
handleEvent(arg) {
// 处理传递过来的参数
}
}
```
2. 使用`v-model`实现双向数据绑定。
在父组件中使用`v-model`绑定一个变量,子组件中使用`$emit`方法触发`update:modelValue`事件,并传递参数,父组件通过`v-on`监听该事件并更新绑定的变量。
父组件中:
```html
<child-component v-model="value"></child-component>
```
```javascript
data() {
return {
value: ''
}
}
```
子组件中:
```javascript
this.$emit('update:modelValue', arg)
```
```javascript
props: {
modelValue: {
type: String,
default: ''
}
},
emits: ['update:modelValue'],
```
阅读全文