我有包含多个组件的Vue应用。此代码在其模板顶部的每个组件中都有重复:
<section v-if="status || warn" class="messages">
<div class="status">{{status}}</div>
<div class="warn">{{warn}}</div>
</section>
以及此代码在单个文件组件的脚本部分中:
data() {
return {
status: '',
warn: ''
}
}
我想将此通用代码提取到名为Status.vue的组件中,并将其他组件导入html部分,如下所示:
<Status></Status>
但是我不知道如何处理数据变量:状态和警告?状态和警告将设置为一些字符串,具体取决于从API调用到远程服务的响应。
我需要在导入了Status组件的组件中重新声明它们吗?
答案 0 :(得分:1)
是的,您仍然必须在使用&
组件的组件data
中拥有这些变量。您将不得不将它们绑定到Status
道具上
Status
答案 1 :(得分:1)
components / status.vue
<template>
<section v-if="status || warn" class="messages">
<div class="status">{{status}}</div>
<div class="warn">{{warn}}</div>
</section>
</template>
<script>
export default {
name: 'status',
props: {
warn: String,
status: String
}
}
</script>
在app.vue中
<template>
<div class="home">
<!-- same as v-bind:warn and v-bind:status -->
<!-- the value "warn" and "status" are from data(),
and its reactive to the components, so every time warn or status changed,
value in the <status> component will also change. -->
<status :warn="warn" :status="status" />
</div>
</template>
<script>
// @ is an alias to /src
import Status from '@/components/Status'
import axios from 'axios'
export default {
components: {
Status
},
data () {
return {
warn: '',
status: '',
}
},
actions: {
fetchData () {
axios.get('http://example.com/api/getItem')
.then((response) => {
this.warn = response.warn
this.status = response.status
})
}
}
}
</script>
每次成功完成fetchData()时,状态组件中的状态和警告都会更改。