Question

我有包含多个组件的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组件的组件中重新声明它们吗？

Answer 1

是的，您仍然必须在使用&组件的组件data中拥有这些变量。您将不得不将它们绑定到Status道具上

Status

Answer 2

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（）时，状态组件中的状态和警告都会更改。

如何在Vue App中将常见HTML提取到组件中？

2 个答案: