【Vue】2-10、Vue 组件

2026/8/17 5:46:31 拓冰建站浏览量

一、组件化开发

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

二、Vue 组件的组成

template：组件的模板结构
script：组件的 JavaScript 行为
style：组件的样式

<template><div class="test-box"><h3>用户自定义Test.vue --- {{ username }}</h3></div>
</template>// 使用 less 语法
<style lang="less">
.test-box {background-color: pink;h3 {color: cyan;}
}
</style><script>
export default {// 注意： .vue 文件中的 data 不能指向对象data() {// return 出去的对象可以定义数据return {username: "Jack",};},
};
</script>

三、组件之间的关系

四、使用 Vue 的三个步骤

使用 components 节点注册的组件为私有子组件，若某个组件在其他组件中需要频繁使用，可以在 main.js文件中使用 Vue.component 注册为全局组件，则在其他组件中无需重复导入该组件便可直接使用。

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

五、组件的 props 属性

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

<script>
export default {// props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值// 自定义属性的名字，是封装者自定义的（只要名称合法即可）// props 中的数据，可以直接在模板结构中被使用// 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！// props: ['init'],props: {// 自定义属性A : { /* 配置选项 */ },// 自定义属性B : { /* 配置选项 */ },// 自定义属性C : { /* 配置选项 */ },init: {// 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效default: 0,// init 的值类型必须是 Number 数字type: Number,// 必填项校验required: true}},data() {return {// 把 props 中的 init 值，转存到 count 上count: this.init}},methods: {show() {console.log(this)}}
}
</script>

<Count :init="9"></Count>

六、组件之间的样式冲突间隔

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

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

单页面应用程序中，所有组件的 DOM 结构都是基于唯一的 index.html 页面进行呈现的

每个组件中的样式都会影响整个 index.html 页面中的 DOM 元素

<style lang="less" scoped></style>

加上 scoped 属性即可解决样式冲突问题！

添加 scoped 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：h5[data-v-3c83f0b7]

/deep/ 样式穿透：

<!-- 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/ -->
/deep/ h5 {color: pink;
}

添加 /deep/ 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：[data-v-3c83f0b7] h5

一叶知秋，奥妙玄心

建站实战干货