Vue（一）组件

午夜零时

已于 2022-04-04 14:42:13 修改

阅读量1.7k

点赞数

分类专栏：前端之旅文章标签： vue.js 前端框架

于 2022-04-03 12:46:22 首次发布

本文链接：https://blog.csdn.net/qq_55796594/article/details/123928851

版权

前端之旅专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件

1.组件的使用步骤
2.单文件组件
3.setup语法糖
- 3.1语法
- 3.2作用

1.组件的使用步骤

1.1创建组件

通过一个普通的 JavaScript 对象来定义组件。注意与创建App的差异，配置项中不能出现data: 和 el：选项，传递数据时使用 data( ){ } 函数。

const ComponentA = {
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

1.2注册组件

1.2.1全局注册

注册组件时使用component函数，总共有两个参数，第一个参数是该组件名称，第二个参数是组件对象（1.1中创建的ComponentA ）。

const app = Vue.createApp({...})

app.component('my-component-name', MyComponent)

除了先创建再注册这种方式外，更简洁的方法是注册时创建。在component第二个参数处写入组件对象。

const app = Vue.createApp({...})

app.component('my-component-name', {
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
})

注意：
当直接在 DOM 中使用一个组件的时候，强烈推荐遵循 W3C 规范来给自定义标签命名：

全部小写
包含连字符 (及：即有多个单词与连字符符号连接)，如：my-component-name

1.2.2局部注册

在App的 components 选项中定义你想要使用的组件：

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

1.3使用组件标签

经过注册后的组件，能够以标签的形式直接使用组件名==标签名

<body>
	<div>
		<ComponentA></ComponentA>
	</div>
</body>

1.4局部注册与全局注册

全局注册
全局注册的组件，在注册之后可以用在任何新创建的组件实例的模板中。比如：注册3个组件

const app = Vue.createApp({})

app.component('component-a', {
  /* ... */
})
app.component('component-b', {
  /* ... */
})
app.component('component-c', {
  /* ... */
})

app.mount('#app')

在id='app’的容器中使用

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

更重要的是在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

局部注册
局部注册的组件在其子组件中不可用。例如，如果你希望ComponentA在 ComponentB 中可用，则你需要这样写：

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

或者在ComponentB文件中导入ComponentA组件：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}

2.单文件组件

2.1单文件组件的结构

Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：

<script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。
<template> 部分定义了组件的模板。
<style> 部分定义了与此组件关联的 CSS。

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

2.2使用

Vue SFC 是框架指定的文件格式，必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS。在实际项目中，通常会将 SFC 编译器与 Vite 或 Vue CLI（基于 webpack）等构建工具集成在一起，Vue 提供的官方脚手架工具，可让你更快地开始使用 SFC。

编译后的 SFC 是一个标准的 JavaScript（ES）模块——这意味着通过正确的构建配置，可以像模块一样导入 SFC：

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

2.3单文件组件的优点

使用熟悉的 HTML、CSS 与 JavaScript 语法编写模块化组件
预编译模板
组件作用域 CSS
使用 Composition API 时更符合人体工程学的语法
通过交叉分析模板与脚本进行更多编译时优化
IDE 支持模板表达式的自动补全与类型检查
开箱即用的热模块更换（HMR）支持

以下场景中推荐使用Vue

单页应用（SPA）
静态站点生成（SSG）
任何重要的前端，其中构建步骤可以得到更好的开发体验（DX）。

3.setup语法糖

在单文件vue中，常用setup script语法糖来省略组件的注册。

3.1语法

<script setup></script>

3.2作用

1.自动注册子组件
2.属性和方法无需返回
3.支持props、emit和context
setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext。
其中defineProps用来接收父组件传来的值props。defineEmit用来声明触发的事件表。useContext用来获取组件上下文context。

<script setup>
import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['event'])
const ctx = useContext()
const props = defineProps({
  msg: String
})
</script>

午夜零时

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue（一）组件

组件1.组件的使用步骤1.1创建组件1.2注册组件1.2.1全局注册1.2.2局部注册1.3使用组件标签1.4局部注册与全局注册2.单文件组件2.1单文件组件的结构2.2使用2.3单文件组件的优点1.组件的使用步骤1.1创建组件通过一个普通的 JavaScript 对象来定义组件。注意与创建App的差异，配置项中不能出现data: 和 el：选项，传递数据时使用 data( ){ } 函数。const ComponentA = { data() { return { count: 1 }
复制链接

扫一扫