vue 的基础应用（下）
上篇聚焦于基础知识的介绍；本篇聚焦于基础知识的应用。
递归组件
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。我们实现一个自定义树的组件。请看示例：
document
// 页面输出：
a
b
c
d
e
f
g
有3点需要注意：
给组件设置 name （行{1}）
使用一个条件来结束无限递归。这里使用了 v-if
数据得满足递归（行{2}）
Tip: 后续不在提供完整的代码，省略 head、body 等。
动态组件
vue 提供了 来动态的挂载组件。请看示例：
// 页面输出： 我是组件 A 切换组件 // 点击按钮（‘切换组件’），依次显示'我是组件 B'、'我是组件 C'...
内置的组件 component 根据属性 is 的值来决定哪个组件被渲染。
nextTick
Vue.nextTick( [callback, context] )
用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。—— 不明白的化，请看示例：
{{message}}
更改数据后（行{20}，dom 元素中的内容其实没有得到更新，输出 false（行{21}）；在 Vue.nextTick() 方法中才被更新，输出 true（行{22}）。
这里涉及到 vue 中一个概念：异步更新。
假如在更改状态（行{20}）后，dom 元素立马得到更新（行{21}），也就是输入出 true，那么用户使用 for 循环改变某个状态 100 次，dom 元素就得更新 100 次，是否觉得浪费！所以 vue 的策略是：使用异步更新，也就是不会马上更新 dom。
手动挂载
vm.$mount( [elementOrSelector] )
用法：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态。我们可以使用 vm.$mount() 方法手动。
我们创建一个组件，三秒后再挂载它。请看示例：
3 秒后，页面上才会看见 Hello!。
数字输入框组件
需求：数字输入框只能输入数字，有两个按钮，分别是减1和加1。此外还可以设置初始值、最大值、最小值，数字改变时通知父组件。
请看完整代码：
父组件 value = {{value}}
// 页面输出： 父组件 value = 10 - 10 + 子组件 inputValue = 10 // 点击 +（每次加减10） 父组件 value = 20 - 20 + 子组件 inputValue = 20 // 继续点击2次 // 减号（-）变为不可点 父组件 value = 1 - 1 + 子组件 inputValue = 1
Tabs 标签页
需求：实现一个常用的组件 —— tabs 标签页。
注：不明白需求的可以看element-ui-tabs
思路：
定义组件 el-tabs
定义 el-tabs 的子组件 tab-pane
父子组件通信使用 vm.KaTeX parse error: Expected 'EOF', got '和' at position 8: parent 和̲ vm.children
请看完整代码：
ul{margin:0;padding: 0;border-bottom: 1px solid;margin-bottom: 10px;} li{display:inline-block;margin-right:10px;cursor:pointer;} .active{color:#409eff;} 用户管理内容 我是 A
配置管理内容 角色管理内容 我是 C
定时任务补偿内容
// 页面输出： // 第一行是 4 个 tab，现在是`角色管理`被选中 用户管理 配置管理 角色管理 定时任务补偿 角色管理内容
我是 C
作者：彭加李
原文出处：https://www.cnblogs.com/pengjiali/p/14673504.html
