Vue中的组件结构答案

【问题标题】：component structure in VueVue中的组件结构
【发布时间】：2021-07-19 21:51:33
【问题描述】：

首先：我从昨晚开始使用 Vue，所以答案可能很明显。

我找到了具有该布局的组件：

<template>
  <Slider v-model="value"/>
</template>

<script>
import Slider from '@vueform/slider'

export default {
  components: { Slider },
}
</script>

<style src="@vueform/slider/themes/default.css" />

但同时，我也发现了结构类似 JS 对象的组件：

app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

有实际区别吗？是首选吗？ Vue2 和 Vue3 又是一个吗？

【问题讨论】：

您好，主要区别在于第一个帮助您以更易于理解的方式正确组织组件。当您处理许多不同的组件时，它也很有帮助。

标签： javascript vue.js vue-component vuejs3

【解决方案1】：

以下语法称为SFC single file component：

<template>
...
</template>

<script>
...
</script>

<style src="@vueform/slider/themes/default.css" />

这需要像 webpack 或 vue cli 这样的捆绑器进行转译，第二种语法（您的示例基于 vue 3）用于定义全局组件，如果您通过 CDN 使用 Vue，则该组件可以工作，

设置中/大型项目时首选第一种语法。

【讨论】：