VUE2.0-2-组件

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

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

组成部分

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

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

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

template

每个组件对应的模板结构，需要定义到template节点中

template是vue提供的容器标签，只起到包裹性质的作用
template中只能包含唯一的根节点（vue2）

script

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

组件相关的data数据，method方法都要定义到export default所导出的对象中

注意data的写法 (.vue组件中的data不能像之前一样指向对象，必须是个函数)

export default {
  data() {
    return {
      
    }          //return出去的对象中可以定义数据
  }
}

style

组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构

使用组件

组件间的关系

使用组件的步骤

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

// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'

用components节点注册组件

 // 2. 注册组件
export default {
  components: {
    Left,
    Right,
    Test
  },
}

以标签的形式使用刚才的组件

<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
 </div>

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

例如：

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

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

注册全局组件

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

import Vue from 'vue'
import App from './App.vue'

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
Vue.component('MyCount', Count)

props

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

props是只读的

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

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

props 的 default 默认值

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

(要把props改成对象形式)

props的type值类型

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

props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },

props 的 required 必填项

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

props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },