vue 组件

努力学习前端的小陈

已于 2022-05-17 10:24:11 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签：前端 vue vue组件组件的 props 前端框架

于 2022-04-22 20:52:31 首次发布

本文链接：https://blog.csdn.net/qq_57587705/article/details/124325501

版权

3.1.1 在 template 中使用指令

3.1.2 在 template 中定义根节点

3.2 组件的 script 节点

3.2.1 .vue 组件中的 data 节点必须是函数

3.2.2 script 中的 name 节点

3.2.3 script 中的 data 节点

3.2.4 script 中的 methods 节点

4.1.2 通过 components 注册的是私有子组件

5.2 props 的 default 默认值

5.3 props 的 type 值类型

5.4 props 的 required 必填项

6.2 style 节点的 scoped 属性

6.3 /deep/ 样式穿透

注意： /deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep( ) 替代 /deep/ 。

7. Class 与 Style 绑定

7.1 动态绑定 HTML 的 class

7.2 以数组语法绑定 HTML 的 class

7.3 以对象语法绑定 HTML 的 class

1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。

render函数中，渲染的是哪个.vue 组件，那么这个组件就叫做“根组件”

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

3. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构

script -> 组件的 JavaScript 行为

style -> 组件的样式

其中，每个组件中必须包含template 模板结构，而script 行为和style 样式是可选的组成部分。

组件script 行为部分中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到 <template> 节点中。

注意：

template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

在 vue 2.x 的版本中，template 中只能包含唯一的根节点

在 vue 3.x 的版本中，<template> 中支持定义多个根节点

3.1.1 在 template 中使用指令

在组件的 <template> 节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。代码示例如下：

3.1.2 在 template 中定义根节点

在 vue 2.x 的版本中，<template> 节点内的 DOM 结构仅支持单个根节点：

但是，在vue 3.x 的版本中，<template> 中支持定义多个根节点：

3.2 组件的 script 节点

vue 规定：组件内的 <script> 节点是可选的，开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。

// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
    }
  }

3.2.1 .vue 组件中的 data 节点必须是函数

vue 规定：.vue 组件中的data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义data 数据节点时，下面的方式是错误的：

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：

https://cn.vuejs.org/v2/guide/components.htmlhttps://cn.vuejs.org/v2/guide/components.html

#data-必须是一个函数

3.2.2 script 中的 name 节点

可以通过name 节点为当前组件定义一个名称：

在使用vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：

3.2.3 script 中的 data 节点

vue 组件渲染期间需要用到的数据，可以定义在data 节点中：

3.2.4 script 中的 methods 节点

组件中的事件处理函数，必须定义到methods

最低0.47元/天解锁文章

努力学习前端的小陈

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 组件

1. 什么是组件化开发组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。2. vue 中的组件化开发vue 是一个支持组件化开发的前端框架。vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。3. vue 组件的三个组成部分每个 .vue 组件都由 3 部分构成，分别是：template -> 组件的模板结构script -> 组件的JavaScrip.
复制链接

扫一扫