vue(五)组件、自定义属性props

一、组件化开发

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

的开发和维护。

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

本质上就是一个 vue 的组件。

二、vue 组件的三个组成部分

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

        template          -----         组件的模板结构

        script               -----         组件的 JavaScript 行为

        style                -----         组件的样式

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

2.1 template

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

<template>
  <div>
    </div>
  </div>
</template>

注意：

        

        template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。template 中只能包含唯一的根节点、

2.2 script 

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

<script>
//组件相关的 data 数据 methods 方法 都要定义到export default 所导出的对象中
export default {};
</script>

        vue 规定：.vue 组件中的 data 必须是一个函数 ， 不能直接指向一个数据对象 。

2.3 style

        vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前

组件的 UI 结构。

        在 <style> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式：

<style lang="less">
.box {
    
}
</style>

        

三、使用组件的三个步骤

以下操作都在App.vue中

步骤1：使用 import 语法导入需要的组件

import Left from "@/components/Left.vue";

步骤2：使用 components 节点注册组件

export default {
  components: {
    Left,
  },
};

步骤3：以标签形式使用刚才注册的组件

<template>
    <div>
       <Left></Left>
    </div>
  </div>
</template>

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

在组件 A 的 components 节点下，注册了组件 F。

则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

3.3 注册全局组件

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

import Left from "@/components/Left.vue";


Vue.component('MyLeft',Left)

四、组件的 props

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

export default {
    //组件的自定义属性
    props:['自定义属性A','自定义属性B','自定义属性C'],
    
    //组建的私有属性
    data(){
        return {}
    }
}

4.1 props 是只读的

        vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直

接报错

        要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

4..2 props 的 default 默认值

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

export default {
  props:{
    info:{
      default:0
    }
  }
};

4.3 props 的 type 值类型

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

export default {
  props:{
    info:{
      default:0,
      //如果传递过来的值不符合此类型，则会在终端报错
      type:Number
    }
  }
};

4.4 props 的 required 必填项

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

export default {
  props: {
    info: {
      //值类型为数字
      type: Number,
      //必填校验项
      required: true,
    },
  },
};