封装意味着解耦，解耦意味着隔离依赖。
隔离依赖的原则是什么？把系统中稳定不变的部分和容易变化的部分隔离开来。
这里的部分是指，数据或过程。
隔离的方式多种多样。比如通过参数来隔离，就像函数的参数使用方式。
Vue组件的参数是指props属性，父组件通过props传值给子组件。
而子组件回传数据给父组件，需使用$emit方法。
这里有两种场景，根据父组件props传值的类型来定。
类型是指，JS的值类型和引用类型。
场景一
子组件修改了父组件传递的引用类型的数据，父组件的该数据也发生变化。
无需子组件特意通知父组件。
父组件.vue
<template>
<father>
<son v-bind:val="data"></son>
</fater>
</template>
<script>
export default {
data(){
return {
data:{
a:1
}
}
}
}
</script>
子组件.vue
<template>
<div v-on:click="valChange">
{{val.a}}
</div>
</template>
<script>
export default {
props:["val"],
methods:{
valChange(){
this.val.a += 1;
}
}
}
</script>
场景二
子组件内部修改了父组件传递的值类型的数据，父组件的该数据不发生变化。
子组件需要通知父组件该数据的变化消息。
<template>
<father>
<son v-bind:val="a" valChange="valChange"></son>
</fater>
</template>
<script>
export default {
data(){
return {
a:1
}
},
methods:{
valChange(newA){
this.a = newA;
}
}
}
</script>
子组件.vue
<template>
<div v-on:click="change">
{{a}}
</div>
</template>
<script>
export default {
props:["a"],
methods:{
change(){
this.$emit("valChange", this.a + 1);
}
}
}
</script>
动态创建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);
};
解决了组件封装的数据传递问题。相当于解决了组件的可复用问题。
