本人前端rookie一枚，接触vue也有将近一年了。从不知道什么是模块化到开发基础的业务组件，其中也踩过不少的坑。总结了一下自己在实战中遇到的问题，欢迎各位大神指出其中的不足之处，或更优质的解决方案，共同学习借鉴。
1. 组件的动态切换
通常，多个组件可以通过v-if或者v-show进行切换。这种方法会产生多个变量控制组件的切换状态。在vue.js开发文档中，介绍了组件的动态切换。
<template>
<component :is="currentView">
<!-- 组件在 currentView 变化时改变！ -->
</component>
</template>
<script>
import { componentA, componentB } from './components'
export default {
components: {
componentA,
componentB
},
data () {
return {
currentView: 'componentA'
}
}
}
</script>
通过这种控制组件注册时的名字变化，可以达到组件的动态切换，类似于多个组件使用v-if控制切换状态。并且，利用is属性可以解决某些dom元素中例如table、ul、select等对内部元素有限制的标签渲染问题。
<template>
<ul>
<li is="componentA"></li>
</ul>
<table>
<tr is="componentB"></tr>
</table>
</template>
2. 组件的prop数据传递
通常，对于一般的组件传递数据，可以写成一下形式。
<template>
<component-a :getA="a" :getB="b" :getC="c" :getE="e" :getF="f">
<!-- 组件内部已定义好props: getA、getB、getC、getE、getF -->
</component-a>
</template>
<script>
import { componentA } from './components'
export default {
components: {
componentA
},
data () {
return {
a: 'str',
b: 0,
c: { d: 1 },
e: [1, 2, 3],
f: num => num * 10
}
}
}
</script>
对于组件需求多个属性的情况，可以利用v-bind传入对象的方式，减少dom元素上写出的属性名。
<template>
<component-a v-bind="propsForComponentA">
<!-- 组件内部已定义好props: getA、getB、getC、getE、getF -->
</component-a>
</template>
<script>
import { componentA } from './components'
export default {
components: {
componentA
},
data () {
return {
propsForComponentA: {
getA: 'str',
getB: 0,
getC: { d: 1 },
getE: [1, 2, 3],
getF: num => num * 10
}
}
}
}
</script>
定义组件的props名字时，若使用驼峰命名，需在父组件上转换为串联式命名。
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<child my-message="hello!"></child>
而当prop 是一个对象或数组，在子组件内部修改对象或数组自身，将会影响父组件的状态。不建议利用修改对象和数组自身和父组件进行通信，保持单向数据流一致，即父组件向子组件通信时用prop传递，子组件向父组件通信时用emit向上触发事件。
3. 自定义事件
子组件通过emit向上通知父组件，而若想达到prop双向绑定，则需要.sync修饰符来更新prop的值。
<template>
<component :foo.sync="bar"></component>
<!-- 组件会被扩展为 -->
<component :foo="bar" @update:foo="val => bar = val">
</component>
</template>
//而子组件需要显式地触发一个事件，而不是直接修改 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分发内容，可以更统一的管理，达到父组件模板的内容，全部在父组件作用域内编译；子组件模板的内容，全部在子组件作用域内编译。
<!-- myComponent子组件内部 -->
<div>
<h2>我是子组件的标题</h2>
<slot name="a">只有具名slot的名称为a时才会显示。</slot>
</div>
<!-- 调用该子组件的父组件内部 -->
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p slot="a">这是一些初始内容</p>
<p slot="b">这是更多的初始内容</p>
</my-component>
</div>
<!-- 渲染结果 -->
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
</div>
</div>
通过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)
})
}
简要总结了下组件的基本知识，之后会更新在实际业务场景中遇到的一些问题及解决方案，欢迎共同讨论。
