1.父组件传值到子组件（props） 2.子组件传值到父组件（$emit） 3.插槽使用（slot）。对于一个独立的组件，props是用来为组件内部注入核心内容；$emit用来使这个组件通过一些操作来融入其它组件中。
1.首先，可以看到前端工程下有一个components目录，在components下新建一个文件夹xx-button，再在xx-button下创建一个index.vue文件
2.然后在index.vue中写自己的代码。为了规范，注意代码中的name命名XxButton，以后使用的组件就是XxButton：
<template> <el-button-group> <el-button v-for="(btn,index) in this.buttons" :key="index" :type="btn.type ? btn.type:'primary'" :icon="btn.icon" :size="btn.size?btn.size:'mini'" @click="btn.click">{{btn.label}}</el-button> </el-button-group> </template> <script> export default { name: 'XxButton', // 注意这里的name命名，就是你以后封装好后使用的组件名 props: { buttons: { type: Array, required: true } } } </script>
3.然后在components下还有一个index.js文件，咱们要在index.js中注册上自己定义的组件：
import XxButton from './xx-button' Vue.component(XxButton.name, XxButton)
注意：这个index.js也一定要在main.js中引入，不然就无法使用。当然，你也可以直接在main.js中直接注册组件，这里为了便于组件的统一管理，就在components下建了一个index.js来统一注册组件。
import './components/index'
4.最后，在页面开发中
<XxButtom :buttom ='this.button'></XxButton>
button: [ { label:'删除'， icon：‘el-del’ click：this.del }, { label:'编辑'， icon：‘el-edit’ click：this.add } ]
