Vue组件

最新推荐文章于 2024-12-13 20:45:36 发布

pingting_

最新推荐文章于 2024-12-13 20:45:36 发布

阅读量291

点赞数

分类专栏： Vue2 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/pingting_/article/details/123025799

版权

Vue2 专栏收录该内容

20 篇文章

订阅专栏

本文详细讲解了Vue组件化开发的各个方面，包括组件化开发原理、Vue组件结构、props使用、父子组件关系、Less语法、样式冲突解决方案，以及私有组件和全局组件的注册。深入探讨了组件间的通信和样式管理，适合开发者提升组件复用和项目管理能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 组件化开发

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

2. vue 中的组件化开发

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

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

3. vue 三个组成部分

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

tepmlate 组件的模板结构

Component template should contain exactly one root element 组件结构中只能包含唯一一个根节点
```
<template>
    <div class="text-box">
        <h3>这是用户自定义的 Test.vue {{ username }}</h3>
    </div>
</template>
```
script 组件的 Js 行为
- export default 默认导出固定写法
- .vue 组件中的 data 不能指向对象应该是个函数
- 然后 return 出去一个用于定义数据的对象
```
<script>
// 默认导出 固定写法
export default {
    // data 数据源
    data() {
        return {
            username: 'Pingting'
        }
    }
}
</script>
```

style 组件的样式

<style>
.text-box{
    background-color: pink;
}
</style>

4. methods watch computed flters

在组件中 this 是当前组件的实例对象

<script>
export default {
    data() {
        return {
            username: 'Pingting'
        }
    },
    methods: {
        changeName() {
            this.username = '娉婷'
        }
    },
    //侦听器
    watch: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {}
}
</script>

5. 启用 less 语法

在 style 标签内加入 lang="less"

<style lang="less">
.text-box{
    background-color: pink;
    h3 {
        color: blue;
    }
}
</style>

6. 组件之间的父子关系

组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
在使用组件的时候,根据彼此的嵌套关系,形成了父子关系,兄弟关系

7. 使用组件的三个步骤

使用 import 语法导入需要的组件

在当前组件的 script 区导入
```
import Left from '@/components/Left.vue'
```

使用 components 节点注册组件

export default {
    components: {
        'Left': Left
    }
}

键与值相同，可以简写

components: {
    Left
}

以标签的形式使用刚刚注册的组件

<div class="box">
    <!-- 渲染 Left 和 Right 组件 -->
    <Left></Left>
    <Right></Right>
</div>

8. 安装并配置@路径提示的插件

安装插件 path Autocomplete
配置插件：在 settings.json 加入下面的配置

"path-autocomplete.extensionOnImport": true,
"path-autocomplete.pathMappings":{
    "@":"${folder}/src"
},

9. 私有子组件和全局组件

9.1 注册私有子组件

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

例如：

在组件A的 components 节点下，注册了组件F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

9.2 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。

import Count from '@/components/Count.vue'
Vue.component('yCount' , Count)

10. 组件的 props

10.1 概念

props 是组件的 自定义属性，在封装通用组件的时候，合理的使用 props 可以极大的提高组件的复用性！

10.2 使用

语法格式：

props 中的数据可以直接在模板结构中被使用。
props 是只读的，直接修改会报错。
要想要修改 props 的值，可以把 props 的值转存到 data 中。

export default {
    // props 是自定义属性
    props:['init1','init2',...]
}

之后可以在该标签上定义这些自定义属性的值：

<MyCount init="9"></MyCount>

此时是给init属性设置为"9"
当init绑定 v-bind （:）则是给属性赋值为双引号内的值 9
:init="9"

10.2 props 是只读的

props 是只读的，直接修改会报错。
要想要修改 props 的值，可以把 props 的值转存到 data 中。

export default {
    // props 是自定义属性
    props:['init'],
    data(){
        return {
            count: this.init
        }
    }
}

10.3 props 的默认值 default

在声明自定义属性时，可以通过 default 来定义属性的默认值。

// props 是自定义属性
props:{
    init:{
        default: 0
    }
}

10.4 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型

props:{
    init:{
        default: 0,
            type: Number
    }
}

10.5 props 的 required 必填项

如果没有传 required 的自定义属性的值，则会报错

props:{
    init:{
        default: 0,
        type: Number,
        required: true
    }
}

11. 组件之间样式冲突问题以及如何解决

11.1 样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间的样式冲突问题的根本原因：

单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

11.2 如何解决

原生方法（底层原理）：

每个组件设置唯一的自定义属性
style 样式使用属性选择器
使得样式只在该组件内有效

<template>
    <div class="right-box" data-v-001>
        <span data-v-001>Right 组件</span>
        <MyCount data-v-001></MyCount>
    </div>
</template>