vue3 el-dialog弹窗传值
时间: 2023-10-11 14:13:30 浏览: 59
在Vue3中,可以通过props属性来传递弹窗组件的值。
首先,在父组件中定义一个变量,用来存储传递给弹窗组件的值:
```javascript
<template>
<div>
<button @click="dialogVisible = true">打开弹窗</button>
<el-dialog v-model="dialogVisible">
<child-component :value="dialogValue" @update:value="dialogValue = $event"></child-component>
</el-dialog>
</div>
</template>
<script>
import childComponent from './childComponent.vue';
export default {
components: {
childComponent
},
data() {
return {
dialogVisible: false,
dialogValue: ''
};
}
};
</script>
```
然后,在子组件中定义props属性,用来接收父组件传递的值,并且通过emit事件来将修改后的值传递给父组件:
```javascript
<template>
<div>
<input v-model="inputValue">
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
inputValue: this.value
};
},
watch: {
inputValue(newValue) {
this.$emit('update:value', newValue);
}
}
};
</script>
```
这样,就可以通过props属性和emit事件来传递和修改弹窗组件的值了。