欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

组件结构

只有template标签是必须的,其他标签都是可缺省的,比如说

<template>
  <h3>组件结构</h3>
</template>

导入组件的步骤

确认组件路径

ComPonent1.vue

<template>
  <h3>ComPonent1.vue</h3>
</template>

<script>

</script>

ComPonent2.vue

<template>
  <h3>ComPonent2.vue</h3>
</template>

<script>

</script>

引用组件

请注意vue3中要求<script setup>
app.vue中

第一步导入组件并命名,注意是<script setup>而不是<script>

<script setup>
import ComPonent1 from "./components/ComPonent1.vue";
import ComPonent2 from "./components/ComPonent2.vue";
</script>

app.vue中

<template>
  <ComPonent1 />
  <ComPonent2 />
</template>

关于命名格式

我们通常使用的是驼峰格式ComPonent,首字母大写,然后不同单词首字母大写,前文展示的是驼峰格式.
实际上可以使用烤肉串格式com-ponent等价于ComPonent,所以使用标签的时候 <com-ponent1 />等同于 <ComPonent1 />,但是推荐使用驼峰格式,这里主要是让大家知道两者其实是一个东西的不同写法.

app.vue中

<template>
  <ComPonent1 />
  <ComPonent2 />
  <br />
  <com-ponent1 />
  <com-ponent2 />
</template>

假设我们要在一个模板(并非app.vue)调用掉一个vue

关键在于在export default中给引入的模块命名,而且要注意,因为此前已经在app.vue中的

<template>
  <ComPonent1 />
  <h3>组件结构</h3>
</template>

<script>
import ComPonent1 from "./ComPonent1.vue";

export default {
  components: {
    ComPonent1,
  },
};
</script>

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』