button组件
亮点:prop接收参数
使⽤组件：
mixins
如果你的项⽬⾜够复杂，或需要多⼈协同开发时，在 app.vue ⾥会 写⾮常多的代码，多到结构复杂难以维护。这时可以使⽤ Vue.js 的 混合 mixins，将不同的逻辑分开到不同的 js ⽂件⾥。
user.js
export default {
data () { return { userInfo: null } },
methods: {
getUserInfo(){
$.ajax('/user/info', (data) => { this.userInfo = data; }); } },
mounted () {
this.getUserInfo();
} }然后在 app.vue 中混合： app.vue：
跟⽤户信息相关的逻辑，都可以在 user.js ⾥维护
$on 与 $emit
$emit 会在当前组件实例上触发⾃定义事件，并传递⼀些参数给监 听器的回调，⼀般来说，都是在⽗级调⽤这个组件时，使⽤ @on 的 ⽅式来监听⾃定义事件的，⽐如在⼦组件中触发事件：$on 监听了⾃⼰触发的⾃定义事件 test，因为有时不确定何时会触 发事件，⼀般会在 mounted 或 created 钩⼦中来监听。
子组件
methods: {
handleEmitEvent() {
this.$emit('test', 'Hello Vue.js')
},
},父组件
mounted() {
this.$on('test', (text) => {
window.alert(text)
})
},⾃⾏实现 dispatch 和 broadcast ⽅法
*思路:
在⼦组件调⽤ dispatch ⽅法，向上级指定的组件实例（最近 的）上触发⾃定义事件，并传递数据，且该上级组件已预先通 过 $on 监听了这个事件；
相反，在⽗组件调⽤ broadcast ⽅法，向下级指定的组件实例 （最近的）上触发⾃定义事件，并传递数据，且该下级组件已 预先通过 $on 监听了这个事件。*
该⽅法可能在很多组件中都会使⽤，复⽤起⻅，我们封装在混合（mixins）⾥。那它的使⽤样例可能是这样的：
有 A.vue 和 B.vue 两个组件，其中 B 是 A 的⼦组件，中间可能跨多级，在 A 中向 B 通信：
// B.vue
export default {
name: 'componentB',
created () {
this.$on('on-message', this.showMessage);
},
methods: {
showMessage (text) { window.alert(text);
} } }在独⽴组件 （库）⾥，每个组件的 name 值应当是唯⼀的，name 主要⽤于递归 组件
emitter.js
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name ===componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
} })
}
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent; if (parent) {
name = parent.$options.name;
} }
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
} },
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
} };同理，如果是 B 向 A 通信，在 B 中调⽤ dispatch ⽅法，在 A 中使 ⽤ $on 监听事件即可。
因为是⽤作 mixins 导⼊，所以在 methods ⾥定义的 dispatch 和 broadcast ⽅法会被混合到组件⾥，⾃然就可以⽤ this.dispatch 和 this.broadcast 来使⽤。
这两个⽅法都接收了三个参数，第⼀个是组件的 name 值，⽤于向上 或向下递归遍历来寻找对应的组件，第⼆个和第三个就是上⽂分析的 ⾃定义事件名称和要传递的数据。 可以看到，在 dispatch ⾥，通过 while 语句，不断向上遍历更新当 前组件（即上下⽂为当前调⽤该⽅法的组件）的⽗组件实例（变量 parent 即为⽗组件实例），直到匹配到定义的 componentName 与 某个上级组件的 name 选项⼀致时，结束循环，并在找到的组件实例 上，调⽤ $emit ⽅法来触发⾃定义事件 eventName。broadcast ⽅法与之类似，只不过是向下遍历寻找。
*相⽐ Vue.js 1.x，有以下不同：
需要额外传⼊组件的 name 作为第⼀个参数；
⽆冒泡机制；
第三个参数传递的数据，只能是⼀个（较多时可以传⼊⼀个对 象），⽽ Vue.js 1.x 可以传⼊多个参数，当然，你对 emitter.js 稍作修改，也能⽀持传⼊多个参数，只是⼀般场景 传⼊⼀个对象⾜以*
组件的通信找到任意组件实例 ——findComponents 系列⽅法
是组件通信的终极⽅案。通过递归、遍历，找到指定组件的 name 选项 匹配的组件实例并返回。 findComponents 系列⽅法最终都是返回组件的实例，进⽽可以读 取或调⽤该组件的数据和⽅法
*它适⽤于以下场景：
由⼀个组件，向上找到最近的指定组件；
由⼀个组件，向上找到所有的指定组件；
由⼀个组件，向下找到最近的指定组件；
由⼀个组件，向下找到所有指定的组件；
由⼀个组件，找到指定组件的兄弟组件。*
utils/assits.js
// 由⼀个组件，向上找到最近的指定组件
//context 上下文
//componentName 组件名称
function findComponentUpward (context, componentName) {
let parent = context.$parent;
let name = parent.$options.name;
while (parent && (!name || [componentName].indexOf(name) < 0)) {
parent = parent.$parent;
if (parent) name = parent.$options.name;
}
return parent;
}
// 由⼀个组件，向上找到所有的指定组件
function findComponentsUpward(context, componentName) {
let parents = []
const parent = context.$parent
if (parent) {
if (parent.$options.name === componentName) parents.push(parent)
return parents.concat(findComponentsUpward(parent, componentName))
} else {
return []
}
},
// 由⼀个组件，向下找到最近的指定组件
function findComponentDownward(context, componentName) {
//context.$children 得到的是当前组件的全部⼦组件
const childrens = context.$children
let children = null
if (childrens.length) {
for (const child of childrens) {
const name = child.$options.name
if (name === componentName) {
children = child
break
} else {
children = findComponentDownward(child, componentName)
if (children) break
}
}
}
return children
},
// 由⼀个组件，向下找到所有指定的组件
//使⽤ reduce 做累加器，为数组中的每一个元素依次执行回调函数,并 ⽤递归将找到的组件合并为⼀个数组并返回，
function findComponentsDownward(context, componentName) {
return context.$children.reduce((components, child) => {
if (child.$options.name === componentName) components.push(child)
const foundChilds = findComponentsDownward(child, componentName)
return components.concat(foundChilds)
}, [])
},
// 由⼀个组件，找到指定组件的兄弟组件
function findBrothersComponents(context, componentName, exceptMe = true) {
//⽗组件的 全部⼦组件，这⾥⾯当前包含了本身
//exceptMe true是不包括自己
let res = context.$parent.$children.filter((item) => {
return item.$options.name === componentName
})
// Vue.js 在渲染组件时，都会给每个组件加⼀个内置的属 性 _uid，这个 _uid 是不会重复的，借此我们可以从⼀系列兄弟组 件中把⾃⼰排除掉
let index = res.findIndex((item) => item._uid === context._uid)
if (exceptMe) res.splice(index, 1)
return res
},
export { findComponentUpward,findComponentsUpward,findComponentDownward,findComponentsDownward,findBrothersComponents };使用(A 是 B 的⽗组件)
组件 A
组件 B
组合多选框组件—— CheckboxGroup & Checkbox
checkbox.vue
updateModel⽅法在 Checkbox ⾥的 mounted 初始化时调⽤。这 个⽅法的作⽤就是在 CheckboxGroup ⾥通过 findComponentsDownward ⽅法找到所有的 Checkbox，然后把 CheckboxGroup 的 value，赋值给 Checkbox 的 model，并根 据 Checkbox 的 label，设置⼀次当前 Checkbox 的选中状态。 这样⽆论是由内⽽外选择，或由外向内修改数据，都是双向绑定的， ⽽且⽀持动态增加 Checkbox 的数量。
checkbox-group.vue
Vue的构造器extend 与⼿ 动挂载$mount
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
创建⼀个 Vue 实例时，都会有⼀个选项 el，来指定 实例的根节点，如果不写 el 选项，那组件就处于未挂载状 态。Vue.extend 的作⽤，就是基于 Vue 构造器，创建⼀个“⼦ 类”，它的参数跟 new Vue 的基本⼀样，但 data 要跟组件⼀样， 是个函数，再配合 $mount ，就可以让组件渲染，并且挂载到任意 指定的节点上，⽐如 body。
import Vue from 'vue'
//创建了⼀个构造器，这个过程就可以解决异步获取 template 模板的问题
const AlertComponent = Vue.extend({
template: '{{ message }}',
data() {
return { message: 'Hello, Aresn' }
},
})⼿动渲染组件，并把它挂载到 body 下：
const component = new AlertComponent().$mount();
//$mount ⽅法对组件进⾏了⼿动渲染，但它仅 仅是被渲染好了，并没有挂载到节点上，也就显示不了组件。此时的 component 已经是⼀个标准的 Vue 组件实例，因此它的 $el 属性 也可以被访问：
document.body.appendChild(component.$el);$mount 也有⼀些快捷的挂载⽅式，以下两种都是可以的：
在 $mount ⾥写参数来指定挂载的节点
new AlertComponent().$mount('#app'); 不⽤ $mount，直接在创建实例时指定 el 选项
new AlertComponent({ el: '#app' });实现同样的效果，除了⽤ extend 外，也可以直接创建 Vue 实例， 并且⽤⼀个 Render 函数来渲染⼀个 .vue ⽂件
import Vue from 'vue'
import Notification from './notification.vue'
const props = {} // 这⾥可以传⼊⼀些组件的 props 选 项
const Instance = new Vue({
render(h) {
return h(Notification, { props: props })
},
})
const component = Instance.$mount()
document.body.appendChild(component.$el)
渲染后, 操作 Render 的 Notification 实例
const notification = Instance.$children[0];
//因为 Instance 下只 Render 了 Notification ⼀个⼦组件，所以可以 ⽤ $children[0] 访问到。⽤ $mount ⼿动渲染的组件，如果要销毁， 也要⽤ $destroy 来⼿动销毁实例，必要时，也可以⽤ removeChild 把节点从 DOM 中移除。
动态渲染 .vue ⽂件的组件—— Display
⼀个常规的 .vue ⽂件⼀般都会包含 3个部分： 新建⼀条路由，并在 src/views 下新建⻚⾯ display.vue 来使 ⽤ Display 组件 // src/views/default-code.js 如果使⽤的是 Vue CLI 3 默认的配置，直接运⾏时，会抛出下⾯的 错误： *这涉及到另⼀个知识点，就是 Vue.js 的版本。 *它的作⽤是，是否使⽤包含运⾏时编译器的 Vue 构建版本。设置为 true 后就可以在 Vue 组件中使⽤ template 选项了， 这个⼩⼩的 Display 组件，能做的事还有很多，⽐如要写⼀套 Vue 组件库的⽂档，传统⽅法是在开发环境写⼀个个的 .vue ⽂件，然后 编译打包、上传资源、上线，如果要修改，哪怕⼀个标点符号，都要 重新编译打包、上传资源、上线。有了 Display 组件，只需要提供 ⼀个服务来在线修改⽂档的 .vue，就能实时更新，不⽤打包、上 传、上线*， this.$Alert 可以在任何位置调⽤，⽆需单独引⼊。 对 Alert 组件进⼀步封装，让它能够实例化，⽽不是常 规的组件使⽤⽅法 Alert 组件没有任何 props，这⾥在 Render Alert 组件时，还是给 它加了 props，当然，这⾥的 props 是空对象 {}，⽽且即使传了内 容，也不起作⽤。这样做的⽬的还是为了扩展性，如果要在 Alert 上 添加 props 来⽀持更多特性，是要在这⾥传⼊的。不过话说回来， 因为能拿到 Alert 实例，⽤ data 或 props 都是可以的。 最后要做的，就是调⽤ notification.js 创建实例，并通过 add 把数 据传递过去，这是组件开发的最后⼀步，也是最终的⼊⼝。 把 alert.js 作为插件注册到 Vue ⾥就⾏，在⼊⼝⽂件 src/main.js中，通过 prototype 给 Vue 添加⼀个实例⽅法： 这样在项⽬任何地⽅，都可以通过 this.$Alert 来调⽤ Alert 组 件了 是同类组件中值得注意的： 1. Alert.vue 的最外层是有⼀个 .alert 节点的，它会在第⼀次调 ⽤ $Alert 时，在 body 下创建，因为不在 它不受路由的影响，也就是说⼀经创建，除⾮刷新⻚⾯， 这个节点是不会消失的，所以在 alert.vue 的设计中，并没有 主动销毁这个组件， ⽽是维护了⼀个⼦节点数组 notices。 2. .alert 节点是 position: fixed 固定的，因此要合理设计它 的 z-index，否则可能被其它节点遮挡。 3. notification.js 和 alert.vue 是可以复⽤的，如果还要开发其 它同类的组件，⽐如⼆次确认组件 $Confirm, 只需要再写⼀ 个⼊⼝ confirm.js，并将 alert.vue 进⼀步封装，将 notices 数组的循环体写为⼀个新的组件， 通过配置来决定是 渲染 Alert 还是 Confirm，这在可维护性上是友好的。 4. 在 notification.js 的 new Vue 时，使⽤了 Render 函数来渲 染 alert.vue， 这是因为使⽤ template 在 runtime 的 Vue.js 版本下是会报错的。 5. 本例的 content 只能是字符串，如果要显示⾃定义的内容，除 了⽤ v-html 指令，也能⽤ Functional Render。 结语Vue.js 的精髓是组件，组件的精髓是 JavaScript。将 JavaScript 开 发中的技巧结合 Vue.js 组件，就能玩出不⼀样的东⻄。 Render Render 函数 返回的是⼀个 JS template 和 Render 写法的对照： 内容 1 内容 2 Render 这⾥的 h，即 createElement，是 Render 函数的核⼼。 该参数是可选的，上⽂所说 的 Render 配置项多，指的就是这个参数。 该参数的完整配置 和示例，可以到 Vue.js 的⽂档查看，没必要全部记住， ⽤到 时查阅就好：createElement 参数 (https://cn.vuejs.org/v2/guide... function.html#createElement-参数)。 [ '内容', h('p', '内容'), h(Component, { props: { someProp: 'foo' } }) ] 重复渲染多个组件或元素，可以通过⼀个循环和⼯⼚函数来解决： 对于含有组件的 slot，复⽤⽐较复杂，需要将 slot 的每个⼦节点都 克隆⼀份，例如： ⼀般情况下是不推荐直接使⽤ Render 函数的，使⽤ template ⾜以，在 Vue.js 中，使⽤ Render 函数的场景，主要有 以下 4 点 解决⽅案就是上⽂中讲到的约束，使⽤⼀个深度克隆 VNode 节点的⽅法 *Vue.js 提供了⼀个 functional 的布尔值选项，设置为 true 可以 使组件⽆状态和⽆实例，也就是没有 data 和 this 上下⽂。这样⽤ Render 函数返回虚拟节点可以更容易渲染，因为函数化组件 （Functional Render）只是⼀个函数，渲染开销要⼩很多。 创建组件： 使⽤上⾯的 my-compoennt 组件： 这⾥的 render.js 因为只是把 demo.vue 中的 Render 内容过继， 并⽆其它⽤处，所以⽤了 Functional Render。 就此例来说，完全可以⽤ slot 取代 Functional Render，那是因为 只有 render 这⼀个 prop。如果示例中的
：组件的模板
使⽤
src/views/display.vue
动态渲染 .vue ⽂件的组件—— Display
const code = `
在使⽤ Vue.js 2 时，有独⽴构建（standalone）和运⾏时构建（runtime-only）
两 种版本可供选择，
Vue CLI 3 默认使⽤了 vue.runtime.js，
它不允许编译 template 模板，
因为我们在 Vue.extend 构造实例时，
⽤了 template 选 项，所以会报错。
解决⽅案有两种，⼀是⼿动将 template 改写为 Render 函数，但这成本太⾼；
另⼀种是对 Vue CLI 3 创建的⼯程做 简单的配置。我们使⽤后者。*
在项⽬根⽬录，新建⽂件 vue.config.js：
module.exports = { runtimeCompiler: true };全局提示组件—— $Alert
该⽅法接收两 个参数：
content：提示内容；
duration：持续时间，单位秒，默认 1.5 秒，到时间⾃动消 失
Alert 组件不同于常规的组件使⽤⽅式，它最终是通过 JS 来调⽤ 的，因此组件不⽤预留 props 和 events 接⼝在 src/component 下新建 alert ⽬录，并创建⽂件 alert.vue
使⽤ Vue.extend 或 new Vue，然后⽤ $mount 挂载到 body 节点下。
notification.js 并不是最终的⽂件，它只是对 alert.vue 添加了⼀个 ⽅法 newInstance。虽然 alert.vue 包含了 template、script、 style 三个标签，并不是⼀个 JS 对象，那怎么能够给它扩展⼀个⽅法 newInstance 呢？事实上，alert.vue 会被 Webpack 的 vue- loader 编译，把 template 编译为 Render 函数，最终就会成为⼀ 个 JS 对象，⾃然可以对它进⾏扩展。 notification.js
import Alert from './alert.vue'
import Vue from 'vue'
Alert.newInstance = (properties) => {
const props = properties || {}
const Instance = new Vue({
data: props,
render(h) {
return h(Alert, { props: props })
},
})
const component = Instance.$mount()
document.body.appendChild(component.$el)
const alert = Instance.$children[0]
return {
add(noticeProps) {
alert.add(noticeProps)
},
remove(name) {
alert.remove(name)
},
}
}
export default Alert ⼊⼝
在 src/component/alert 下创建⽂件
alert.js： // alert.js
import Notification from './notification.js'
let messageInstance
// getMessageInstance 函数⽤来获取实例，它不会重复创建，如 果 messageInstance 已经存在，就直接返回了，只在第⼀次调⽤ Notification 的 newInstance 时来创建实例。
function getMessageInstance() {
messageInstance = messageInstance || Notification.newInstance()
return messageInstance
}
function notice({ duration = 1.5, content = '' }) {
let instance = getMessageInstance()
instance.add({ content: content, duration: duration })
}
export default {
info(options) {
return notice(options)
},
}
// alert.js 对外提供了⼀个⽅法 info，如果需要各种显示效果，⽐如 成功的、失败的、警告的，可以在 info 下⾯提供更多的⽅法，⽐如 success、fail、warning 等，并传递不同参数让 Alert.vue 知道显 示哪种状态的图标。本例因为只有⼀个 info，事实上也可以省略 掉，直接导出⼀个默认的函数，这样在调⽤时，就不⽤ this.$Alert.info() 了，直接 this.$Alert()。src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Alert from '../src/components/alert/alert.js'
Vue.config.productionTip = false
Vue.prototype.$Alert = Alert
new Vue({ router, render: h => h(App) }).$mount('#app')
src/views/alert.vue
更灵活的组件：Render 函数与 Functional
对象，没有传统 DOM 的层级关系，配合上 if、 else、for 等语句，将节点拆分成不同JS对象再组装。
export default {
data() {
return { show: false }
},
render: (h) => {
let childNode
if (this.show) {
childNode = h('p', '内容 1')
} else {
childNode = h('p', '内容 2')
}
return h(
'div',
{
attrs: { id: 'main' },
class: { container: true },
style: { color: 'red' },
},
[childNode]
)
},
}
可以看 到，template 中的 v-if / v-else 等指令，都被 JS 的 if / else 替 代了，
那 v-for ⾃然也会被 for 语句替代。
h 有 3 个参数，分别是：
// 1. html 标签
h('div');
// 2. 组件选项
import DatePicker from '../component/date- picker.vue'; h(DatePicker);
所有的组件树中，如果 vNode 是组件或含有组件的 slot，那么 vNode 必须唯⼀const Child = {
render: (h) => {
return h('p', 'text')
},
}
export default {
render: (h) => {
const children = Array.apply(null, { length: 5 }).map(() => {
return h(Child)
})
return h('div', children)
},
} {
render: (h) => {
function cloneVNode(vnode) {
//递归遍历所有⼦节点，并克隆
const clonedChildren =
vnode.children && vnode.children.map((vnode) => cloneVNode(vnode))
const cloned = h(vnode.tag, vnode.data, clonedChildren)
cloned.text = vnode.text
cloned.isComment = vnode.isComment
cloned.componentOptions = vnode.componentOptions
cloned.elm = vnode.elm
cloned.context = vnode.context
cloned.ns = vnode.ns
cloned.isStatic = vnode.isStatic
cloned.key = vnode.key
return cloned
}
const vNodes =
this.$slots.default === undefined ? [] : this.$slots.default
const clonedVNodes =
this.$slots.default === undefined
? []
: vNodes.map((vnode) => cloneVNode(vnode))
return h('div', [vNodes, clonedVNodes])
}
}
深度克隆 slot 并⾮ Vue.js 内置⽅法,
在⼀些特殊的场景才会使⽤到，正常业务⼏乎是⽤不到的。⽐如 iView 组件库的穿梭框组件 Transfer，就⽤到了这种⽅法：
slot 是⼀个 Refresh 按钮，使⽤者只写了⼀遍，但在 Transfer 组件中，是通过克隆 VNode 的⽅法，显示了两遍。
如果 不这样做，就要声明两个具名 slot，但是左右两个的逻辑可能是完 全⼀样的，使⽤者就要写两个⼀模⼀样的 slot，这是不友好的*
Render 函数的基本⽤法还有很多，⽐如 v-model 的⽤ 法、事件和修饰符、slot 等，读者可以到 Vue.js ⽂档阅 读。Vue.js 渲染函数 (https://cn.vuejs.org/v2/guide... function.html)Render 函数使⽤场景
Functional Render
使⽤函数化组件，Render 函数提供了第⼆个参数 context 来提供临 时上下⽂。组件需要的 data、props、slots、children、parent 都 是通过这个上下⽂来传递的，⽐如 this.level 要改写为 context.props.level，this.$slots.default 改写为 context.children,您可以阅读 Vue.js ⽂档—函数式组件 (https://cn.vuejs.org/v2/guide... function.html#函数式组件) 来查看示例。
函数化组件在业务中并不是很常⽤，⽽且也有类似的⽅法来实现，⽐ 如某些场景可以⽤ is 特性来动态挂载组件。函数化组件主要适⽤于 以下两个场景*
1.程序化地在多个组件中选择⼀个；
2.在将 children、props、data 传递给⼦组件之前操作它们。
某个组件需要使⽤ Render 函数来⾃定义，⽽不是 通过传递普通⽂本或 v-html 指令，这时就可以⽤ Functional Render，来看下⾯的示例：
⾸先创建⼀个函数化组件 render.js： // 它只定义了⼀个 props：render，格式为 Function，因为是 functional，所以在 render ⾥使⽤了第⼆个参数 ctx 来获取 props。这是⼀个中间⽂件，并且可以复⽤，其它组件需要这 个功能时，都可以引⼊它
// render.js
export default {
functional: true,
props: { render: Function },
render: (h, ctx) => {
return ctx.props.render(h)
},
}