vue一个文件引用另一个文件的两个数据分别到两个v-show里
时间: 2023-12-08 22:04:04 浏览: 25
您好!可以通过在父组件中引入子组件并通过props传递数据,然后在子组件中分别使用v-show展示这两个数据。以下是一个示例:
父组件中引入子组件并传递数据:
```html
<template>
<div>
<child-component :data1="myData1" :data2="myData2"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
myData1: true,
myData2: false
}
}
}
</script>
```
子组件中使用v-show展示数据:
```html
<template>
<div>
<div v-show="data1">Data 1 is true</div>
<div v-show="data2">Data 2 is true</div>
</div>
</template>
<script>
export default {
props: {
data1: Boolean,
data2: Boolean
}
}
</script>
```
在上面的示例中,父组件中有两个数据`myData1`和`myData2`,它们分别传递给了子组件`ChildComponent`。在子组件中,我们使用了`props`来声明这两个数据,并通过`v-show`展示它们。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![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)
![](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)