vue 模态框传递数据
时间: 2023-11-07 08:03:55 浏览: 49
在Vue中,可以通过props属性来传递数据给模态框组件。下面是一个示例:
首先,在父组件中定义一个数据,然后将它通过props传递给子组件(模态框组件)。
父组件示例代码:
```vue
<template>
<div>
<button @click="showModal = true">打开模态框</button>
<modal :show="showModal" :data="modalData" @close="showModal = false"></modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false,
modalData: {
name: 'John Doe',
age: 30
}
}
}
}
</script>
```
然后,在子组件中使用props接收传递过来的数据并进行使用。
子组件示例代码(Modal.vue):
```vue
<template>
<div v-if="show">
<h2>{{ data.name }}</h2>
<p>Age: {{ data.age }}</p>
<button @click="$emit('close')">关闭模态框</button>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
data: Object
}
}
</script>
```
在这个示例中,当点击父组件的按钮时,模态框会显示,并且模态框中展示父组件传递过来的数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)