vue中組件元數(shù)據(jù)的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)vue中組件元數(shù)據(jù)的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

組件元數(shù)據(jù)

并不是你添加到組件的每一點(diǎn)信息都是狀態(tài)。有時(shí)你需要添加一些元數(shù)據(jù)來(lái)為其他組件提供更多信息。

例如：如果你要為 Google Analytics 等分析儀表板構(gòu)建一堆不同的小部件：

如果你希望布局知道每個(gè)小部件應(yīng)占用多少列，你可以將其作為元數(shù)據(jù)直接添加到組件上：

export default {
  name: 'LiveUsersWidget',
  // ? 只需將其添加為額外屬性
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

你會(huì)發(fā)現(xiàn)此元數(shù)據(jù)是組件上的一個(gè)屬性：

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

你還可以通過(guò)特殊$options屬性從組件內(nèi)部訪問(wèn)元數(shù)據(jù)：

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // ? `$options` 包含組件的所有元數(shù)據(jù)
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

請(qǐng)記住，此元數(shù)據(jù)對(duì)于組件的每個(gè)實(shí)例都是相同的，并且不是響應(yīng)式的。

其他用途包括（但不限于）：

• 保留各個(gè)組件的版本號(hào)

• 用于構(gòu)建工具的自定義標(biāo)志以區(qū)別對(duì)待組件

• 向組件添加自定義功能，超出計(jì)算道具、數(shù)據(jù)、觀察者等。

關(guān)于“vue中組件元數(shù)據(jù)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。