“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