Как извлечь общий HTML-код в компонент в приложении Vue?

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

компоненты / 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 ().

Answer 2

Да, вы все равно должны иметь эти переменные в data компонента, который использует компонент Status.Вам нужно будет привязать их к Status реквизитам вот так

<Status
  :status="status"
  :warn="warn"
>
</Status>