本人前端rookie一枚，接触vue也有将近一年了。从不知道什么是模块化到开发基础的业务组件，其中也踩过不少的坑。总结了一下自己在实战中遇到的问题，欢迎各位大神指出其中的不足之处，或更优质的解决方案，共同学习借鉴。
1. 组件的动态切换
通常，多个组件可以通过v-if或者v-show进行切换。这种方法会产生多个变量控制组件的切换状态。在vue.js开发文档中，介绍了组件的动态切换。
通过这种控制组件注册时的名字变化，可以达到组件的动态切换，类似于多个组件使用v-if控制切换状态。并且，利用is属性可以解决某些dom元素中例如table、ul、select等对内部元素有限制的标签渲染问题。
2. 组件的prop数据传递
通常，对于一般的组件传递数据，可以写成一下形式。
对于组件需求多个属性的情况，可以利用v-bind传入对象的方式，减少dom元素上写出的属性名。
定义组件的props名字时，若使用驼峰命名，需在父组件上转换为串联式命名。
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '{{ myMessage }}'
})
而当prop 是一个对象或数组，在子组件内部修改对象或数组自身，将会影响父组件的状态。不建议利用修改对象和数组自身和父组件进行通信，保持单向数据流一致，即父组件向子组件通信时用prop传递，子组件向父组件通信时用emit向上触发事件。
3. 自定义事件
子组件通过emit向上通知父组件，而若想达到prop双向绑定，则需要.sync修饰符来更新prop的值。
//而子组件需要显式地触发一个事件，而不是直接修改 prop
this.$emit('update:foo', newValue)
4. 非父子组件通信（vuex原型）
有时候两个组件之间需要进行通信，但它们彼此不是父子组件的关系。在一些简单场景，使用一个空的 Vue 实例作为一个事件总线中心。
var bus = new Vue()
// 在组件 A 的 methods 方法中触发事件
bus.$emit('id-selected', 1)
// 在组件 B 的 created 钩子函数中监听事件
bus.$on('id-selected', function (id) {
console.log(id) //1
})
详见状态管理模式
5. slot分发内容
通常，一个组件只会关心组件内部如何渲染，而组件自身的状态则是由父组件来控制。当子组件内部的部分功能需要由父组件来控制时，一般的做法是通过prop向子组件发起通知，功能完成后利用emit向上触发父组件完成功能的回调。而通过slot分发内容，可以更统一的管理，达到父组件模板的内容，全部在父组件作用域内编译；子组件模板的内容，全部在子组件作用域内编译。
我是子组件的标题
只有具名slot的名称为a时才会显示。
我是父组件的标题
这是一些初始内容
这是更多的初始内容
我是父组件的标题
我是子组件的标题
这是一些初始内容
通过slot分发内容，可以在子组件中插入由父组件控制的内容，从而达到父组件模板的内容，全部在父组件作用域内编译；子组件模板的内容，全部在子组件作用域内编译。
6. 弹窗类组件
在一般的业务场景中，通常都会有一些格式规范的提示，弹窗等常见的交互形式。其原理无非就是在需要的特定元素中插入dom接点，渲染出组件，在生命周期结束后销毁。而在vue中，一旦创建了新的vue实例，就要考虑到组件的通信，路由的跳转等方式的互通场景。
import Vue from "vue"
const ComponentA = Vue.extend(require("./index.vue"))
let getAnInstance = function(data, callbacks) {
let instance = new ComponentA({
el: document.createElement("div"),
data: function() {
return {
param: data,
callbacks: callbacks
}
},
store: window.vuexStore, //向新的vue实例传递全局变量vuexStore
router: window.vueRouter //向新的vue实例传递全局变量vueRouter
})
instance.vm = instance.$mount()
return instance
}
export default function(data, callbacks) {
let instance = getAnInstance(data, callbacks)
Vue.nextTick(function() {
document.body.appendChild(instance.vm.$el)
})
}
简要总结了下组件的基本知识，之后会更新在实际业务场景中遇到的一些问题及解决方案，欢迎共同讨论。