“name”屬性可以用於自定義 VueJS 組件嗎

Question

例如，當您創建一個組件時，我們將其命名為test-component 。 我們可以應用 id 和/或 class 來識別它嗎？ 我們是否也可以使用 name 屬性，以便這個自定義組件可以用作表單輸入（因為它可以在內部包含輸入）？

<test-component class="test-class" name="test-input" /> 

如果沒有，有什么替代方案？

Answer 1

如果您向組件添加任何屬性，它們將被添加到組件的第一個元素中（除非它們被注冊為 props）。

所以，如果你不希望name屬性出現在組件的第一個元素上，你需要使用Props。 這是一個例子：

<template>
  <div>
    <input type="text" :name="name">
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  props: ['name']
};
</script>

現在您可以按照您的描述使用該組件。 結果將是：

<div class="test-class">
    <input type="text" name="maycustomname">
</div>

在官方文檔中閱讀更多關於 props 的信息： https ://v2.vuejs.org/v2/guide/components-props.html