1. emits 选项
emits 选项用于声明组件可以触发的自定义事件，以提高组件的类型检查。
<script>
export default {
emits: ['custom-event'],
methods: {
handleClick() {
this.$emit('custom-event', 'Event data');
},
},
};
</script>
2. inheritAttrs 选项
inheritAttrs 选项控制是否在组件根元素上绑定非 Prop 特性。默认情况下，Vue 3.0 中组件不会自动将非 Prop 特性绑定到根元素。
<script>
export default {
inheritAttrs: false,
setup(props, { attrs }) {
// 访问非 Prop 特性
console.log(attrs.class);
return {};
},
};
</script>
3. template 选项
template 选项允许在没有使用编译器的情况下直接使用字符串模板。这在某些情况下可能会很有用。
<script>
export default {
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, Vue 3.0!',
};
},
};
</script>
4. delimiters 选项
delimiters 选项用于自定义插值的分隔符，默认为 ['{{', '}}']。
<script>
export default {
delimiters: ['${', '}'],
template: '<div>${ message }</div>',
data() {
return {
message: 'Hello, Vue 3.0!',
};
},
};
</script>
5. comment 选项
comment 选项控制是否在渲染时保留注释。
<script>
export default {
comment: false,
template: '<!-- This comment will be removed in the rendered output -->',
};
</script>
6. global 选项
global 选项用于声明一个全局组件，使其在所有组件中都可用。
<script>
export default {
global: true,
template: '<global-component />',
};
</script>
这些杂项选项提供了一些特定场景下的定制功能，你可以根据项目的需求选择性地使用它们。在通常情况下，大多数应用不需要关注这些选项，因为 Vue 提供了合理的默认行为和API。
转载请注明出处：http://www.zyzy.cn/article/detail/572/Vue 3.0