vue自定义组件

前言

在项目开发中，现有的一些ui框架其实是很不错的，但是坑也不少，加上我们的一些业务需求，其实这些框架的功能是不能去实现的，这时候，我们可以结合 Vue 组件化的特性，开发可复用且适合我们业务的组件是很有必要的，以便提高开发效率和质量。

封装组件的步骤

思考这个组件需要实现什么
写写这个组件的基本样式，大致效果是怎样的
实现的基本逻辑是怎样
数据结构、方法以及他们如何传值、暴露
注册、调用

实现什么

实现一个select单选的组件，通过父组件传入待选项，select组件进行选择

通过Prop向子组件传递数据

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行.当然对 props 传递的参数应该添加一些验证规则；当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
Invalid prop: type check failed for prop "data". Expected Array, got String.

// 子组件
props: {
  data: Array，
  require: true
},
// 父组件
return {
  // prop指定类型后，传入的值也应该是相对应的类型，否则会报错
  data: 'sss',
  selectValue: ''
}

prop类型

String、Number、Boolean、Array、Object

prop类型检测

default、required、自定义验证

通过事件向父级组件发送消息

在组件开发中，要求我们与父组件进行沟通，我们可以调用内建的this.$emit 方法并传入事件的名字，来向父级组件触发一个事件;
子组件通过触发父组件的函数，我们在父组件中监听这个事件，就像原生DOM事件一样
使用事件抛出一个值，用于改变父组件的选中值

// change是触发父组件的函数
this.$emit('change', value)

组件注册

局部注册：

  components: {
    Select
  },

代码

父组件：

<template>
  <div id="app">
    <h2>自定义组件</h2>
    <Select @change="getSelectValue" :data="data"></Select>
    <div>这是父组件获取到的值：{{selectValue}}</div>
  </div>
</template>

<script>
import Select from './components/Select.vue'
export default {
  name: 'app',
  components: {
    Select
  },
  data () {
    return {
      data: ['苹果', '香蕉', '葡萄', '草莓', '西瓜'],
      selectValue: ''
    }
  },
  methods: {
    /**
     * @description 获取select选中值
     * @param {object|array} value 当前选中值 
     */
    getSelectValue (value) {
      this.selectValue = value
    }
  }
}
</script>

子组件：

<template>
  <div id="my-select">
    <div @click="showSelectList" class="value-box">
      <span v-if="!value" class="tip">请选择</span>
      <span v-else class="value">{{value}}</span>
    </div>
    <ul v-show="selectShow">
      <li v-for="(item, index) in data" :key="index" @click="choseValue(item)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Select',
  props: {
    data: Array
  },
  data () {
    return {
      selectShow: false,
      value: ''
    }
  },
  methods: {
    // [showSelectList 显示选项]
    showSelectList () {
      this.selectShow = true
    },
    /**
     * @description 选择当前项
     * @param {string} value 当前选中值
     */
    choseValue (value) {
      this.value = value
      this.selectShow = false
      this.$emit('change', value)
    }
  }
}
</script>

小作业

在以上select的基础上，增加多选操作

最后编辑于：2018.12.04 09:18:37