javascript - “name”属性可以用于自定义 VueJS 组件吗
问题描述
例如,当您创建一个组件时,我们将其命名为test-component。我们可以应用 id 和/或 class 来识别它吗?我们是否也可以使用 name 属性,以便这个自定义组件可以用作表单输入(因为它可以在内部包含输入)?
<test-component class="test-class" name="test-input" />
如果没有,有什么替代方案?
解决方案
如果您向组件添加任何属性,它们将被添加到组件的第一个元素中(除非它们被注册为 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 ://vuejs.org/v2/guide/components-props.html