this.$refs父子传值
时间: 2023-09-09 19:13:56 浏览: 176
在 Vue.js 中,父组件向子组件传递值可以通过 props 进行。而子组件向父组件传递值可以借助自定义事件和 $emit 方法。
父组件向子组件传递值(props)的示例:
1. 在父组件的模板中,使用子组件并通过 props 传递值:
```html
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
```
2. 在子组件中,通过 props 接收父组件传递的值:
```html
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message'],
}
</script>
```
子组件向父组件传递值(自定义事件)的示例:
1. 在子组件的模板中,定义一个按钮,通过点击触发自定义事件:
```html
<template>
<div>
<button @click="sendValueToParent">传递值给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendValueToParent() {
this.$emit('custom-event', '传递的值');
}
}
}
</script>
```
2. 在父组件中,通过监听子组件的自定义事件接收传递的值:
```html
<template>
<div>
<child-component @custom-event="handleValueFromChild"></child-component>
<p>从子组件接收的值:{{ receivedValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
receivedValue: ''
}
},
methods: {
handleValueFromChild(value) {
this.receivedValue = value;
}
}
}
</script>
```
通过这种方式,父组件和子组件可以进行双向的传值操作。
阅读全文