封装一个可复用的业务Vue组件

封装意味着解耦，解耦意味着隔离依赖。
隔离依赖的原则是什么？把系统中稳定不变的部分和容易变化的部分隔离开来。
这里的部分是指，数据或过程。

隔离的方式多种多样。比如通过参数来隔离，就像函数的参数使用方式。
Vue组件的参数是指props属性，父组件通过props传值给子组件。

而子组件回传数据给父组件，需使用$emit方法。
这里有两种场景，根据父组件props传值的类型来定。
类型是指，JS的值类型和引用类型。

场景一

子组件修改了父组件传递的引用类型的数据，父组件的该数据也发生变化。
无需子组件特意通知父组件。

父组件.vue

子组件.vue

场景二

子组件内部修改了父组件传递的值类型的数据，父组件的该数据不发生变化。
子组件需要通知父组件该数据的变化消息。

子组件.vue

动态创建Vue组件的思路

1.在组件生命周期mounted，传入动态组件的引用，生成DOM实例，并插入已有DOM结构。

2.因为template是字符串，可根据参数来定义字符串的值，从而定义不同的模板。

const factoryElComponent = function(config, mountRef, $refs) {
  const Component = Vue.extend(config);
  const markedComponent = new Component().$mount();
  $refs[mountRef].appendChild(markedComponent.$el);
};

解决了组件封装的数据传递问题。相当于解决了组件的可复用问题。