Javascript Vue中的组件结构

第一：我从昨晚开始使用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" />

从“@vueform/Slider”导入滑块
导出默认值{
组件：{Slider}，
}

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

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

app.component（'button-counter'）{
数据（）{
返回{
计数：0
}
},
模板：`
你点击我{{count}}次。
`
})

---

有实际的区别吗？你喜欢哪一种？Vue2和Vue3是否还有一个？

以下语法称为

SFC

：

...
...

这需要传输webpack或vue cli之类的捆绑程序，第二种语法（您的示例基于vue 3）用于定义全局组件，如果您通过CDN使用vue，该组件可以工作

---

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

以下语法称为

SFC

：

...
...

这需要传输webpack或vue cli之类的捆绑程序，第二种语法（您的示例基于vue 3）用于定义全局组件，如果您通过CDN使用vue，该组件可以工作

---

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

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

<template>
...
</template>

<script>
...
</script>

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