Vue组件的使用

发布于 2021-12-02  267 次阅读


一、Vue-cli

  1. vue-cli介绍

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。

中文官网:https://cli.vuejs.org/zh/

  1. vue-cli安装

vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目:

vue create demo

二、组件

1. 什么是组件化开发

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

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue 。

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

每个 .vue 组件都由 3 部分构成,分别是:

  1. template -> 组件的模板结构
  2. script -> 组件的 JavaScript 行为
  3. style -> 组件的样式

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

3.1 template

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

1.png

注意:

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

注: Vue2中template中只能包含唯一的根节点,在Vue3中不受限制

3.2 .vue 组件中的 data 必须是函数

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

  data:{
        username:'小小孩子们的博客 www.xxhzm.cn'
    },

需要定义成这种:

data(){
    return{
        username:'小小孩子们的博客 Www.xxhzm.cn'
    }
},

3.3 组件之间的父子关系

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

3.4 使用组件的三个步骤

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

    import Right from "@/components/right.vue";

  2. 使用 components 节点注册组件

    components: {
    Right
    },
    
  3. 以标签形式使用刚才注册的组件

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

例如:
在组件 A 的 components 节点下,注册了组件 F。
则组件 F 只能用在组件 A 中;不能被用在组件 C 中。

注册全局组件
在 vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。示例代码如下:

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

参数1:字符串格式,表示组件的注册名称
参数2:需要被全局注册的那个组件

3.6 props的使用

props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!
它的语法格式如下:

props:['init'],
<MyCount :init="9"></MyCount>

在使用组件处传入init

3.6.1 props是只读的

vue 规定:组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值。否则会直接报错
要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据都是可读可写的!

  data() {
    return {
      count: this.init,
    };
  },

3.6.2 props 的 default 默认值
在声明自定义属性时,可以通过 default 来定义属性的默认值。示例代码如下:

  props:{
      init:{
        //   如果外界在使用Count组件时候,没有传递init的值,则默认值生效
          default:0
      }
  },

3.6.3 props 的 type 值类型

在声明自定义属性时,可以通过 type 来定义属性的值类型。示例代码如下:

  props:{
      init:{
        //   如果外界在使用Count组件时候,没有传递init的值,则默认值生效
          default:0,
          
          type:Number
      }
  },

3.6.4 props 的 required 必填项
在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性的值。示例代
码如下:

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

三、 组件之间的样式冲突问题

默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。
原理:
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域:
1.png

<template>
  <div class="left">
    <h1 data-v-001>left组件</h1>
    <MyCount :init="9"></MyCount>
  </div>
</template>


<style lang="less">
.left {
  float: left;
  width: 50%;
  height: 400px;
  background: chocolate;
}

h1[data-v-001] {
  color: red;
}
</style>

实际使用
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题:
2.png

1.2样式穿透

如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样
式对子组件生效,可以使用 /deep/ 深度选择器。

/deep/ h2{
    color:pink
}

加了deep生成的选择器格式为

[data-v-19cd203c] h2 {}

注:当使用第三方组件的时候,如果有修改第三方组件的样式的需求,可以使用/deep/


小小孩子们