以下是一个使用内联模板的示例，演示了如何在组件中使用内联模板 attribute：
<template>
<!-- 使用内联模板 attribute -->
<my-component v-slot="{ message }" :custom-attribute="message">
<p>{{ message }}</p>
</my-component>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
template: `
<div>
<!-- 内联模板 attribute 的内容 -->
<slot :message="internalMessage"></slot>
</div>
`,
data() {
return {
internalMessage: 'Hello from internal data'
};
}
});
</script>
在上述示例中，<my-component> 组件使用了内联模板 attribute v-slot="{ message }"，并通过 :custom-attribute="message" 将模板中的 message 值传递给了组件的自定义属性 custom-attribute。
使用内联模板可以更加紧凑地定义模板，尤其是在模板内容较简单的情况下。需要注意的是，使用内联模板时，不再需要额外的 <template> 标签，而是直接在组件标签中定义模板内容。
转载请注明出处：http://www.zyzy.cn/article/detail/550/Vue 3.0