上篇文章从0开始写Vue组件(上)
，实现了一个可以在父元素里面随意移动，缩放的mdiv组件。这篇文章我们将利用这个组件，来实现一个新的组件。准确的来说，是实现N多个具有可以随意移动、缩放的功能不尽相同的新组件。也就是说新组件继承了上一个组件的特性。

一些依赖

在上一个组件里面，使用了font awesome的css版本。使用也是很方便。

1） 下载最新的font awesome，复制web-fonts-with-css文件夹到src/assets目录下。
2） 在main.js文件里面加入import './assets/web-fonts-with-css/css/fontawesome-all.css'就可以在其他地方使用了。

使用方法类似于<span class="fas fa-ellipsis-v" v-show="isedit"></span>，注意fas和fa-前缀。这样就可以显示图表了。

另外一个依赖就是echarts了。使用npm install echarts --save安装即可。

第二个组件

template

<template>
  <mdiv @mdiv='resize' :outline="outline" :isedit="isedit" :name="name">
    <div slot="container" class="container" ref="pie"></div>
    <div slot="contextmenu" class="contextmenu" v-show="ishid && isedit">
      <span class="fas fa-edit fa-fw"></span>
      <span class="fas fa-trash-alt fa-fw"></span>
    </div>
  </mdiv>
</template>

只需少量代码就能完成一个组件，这个组件是之前组件的父组件。也就是说之前的组件是这个组件的子组件。

mdiv是引入之前组件后的命名。

@mdiv='resize' :outline="outline" :isedit="isedit" :name="name"监听了子组件的mdiv事件。将参数通过pros进行向下传递。

实际上，子组件通过emit将信息向上传递给父组件。

mdiv里面有两个div，通过slot特性。这两个div实际上是被插入到子组件里面了。利用这个特性，这个组件，或者说文件，可以使用classcontainer和contextmenu，他们其实是在mdiv.vue文件的style里。尽管有scope修饰了，但在这个文件里面使用，也是有效的。

script

<script>
import mdiv from '../mdiv'
import echarts from 'echarts'

export default {
  components: {
    mdiv
  },
  data () {
    return {
      ishid: false,
      isedit: true,
      outline: [10, 50, 400, 400],
      name: '测试',
      e: null,
      option: {
        legend: {},
        dataset: {
          source: [
            ['name', 'apple', 'orange', 'pear', 'lemon'],
            ['2018', 234, 446, 230, 124]
          ]
        },
        series: [{
          type: 'pie',
          radius: ['30%', '55%'],
          seriesLayoutBy: 'row'
        }]
      }
    }
  },
  methods: {
    resize (arg) {
      if (arg === 'resize') {
        this.e.resize()
        console.log('resize')
      } else if (arg === 'menu') {
        this.ishid = !this.ishid
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.e = echarts.init(this.$refs.pie, 'light')
      this.e.setOption(this.option)
    })
  }
}
</script>

这段代码应该不陌生了。除了开头的几行，剩下的在上一篇文章就讲了。

import X from Y，是指将Y导入到本文件中，并命名为X。

  components: {
    mdiv
  }

components是指将mdiv当作组件使用。这样就可以在template中，像HTML元素一样使用了。

使用pie组件

最后，可以在app.vue文件里面，像pie.vue使用mdiv.div一样使用pie.vue了。