查看 原文站点，更多扩展内容及更佳阅读体验！
实战：常用组件的开发
数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大/小值，在数值改变时，触发一个自定义事件来通知父组件。
目录文件：
-
index.html入口页 -
input-number.js数字输入框组件 -
index.js根实例
先在template里定义组件的根节点，因为是独立组件，所以应该对每个prop进行校验。
接下来，先在父组件引入input-number组件。
value是一个关键的绑定值，使用v-model。大多数的表单组件都应该有一个v-model，比如输入框、单选框、多选框、下拉选择器等。
Vue组件时单向数据流，无法从组件内部直接修改prop value的值。
解决办法是给组件声明一个data，默认引用value的值，然后在组件内部维护这个data。
Vue.component('input-number', {
data() {
return {
currentValue: this.value
}
}
});
这样只解决了初始化时引用父组件value的问题，但是如果从父组件修改了value，input-number组件的currentValue也要一起更新。
监听（watch），watch选项用来监听某个prop或data的改变，当它们发生变化时，就会触发watch配置的函数，从而完成业务逻辑。
从父组件传递过来的value可能不符合当前条件（大于max，或小于min），所以在methods中写了一个方法updateValue，用来过滤出一个正确的currentValue。
watch监听的数据的回调函数有2个参数可用，第一个是新的值，第二个是旧的值。
在回调函数里，this指向当前组件实例。所以可以直接调用this.updateValue()，因为Vue代理了props、data、computed及methods。
监听currentValue的回调里，this.$emit('input',val)在使用v-model时改变value，this.$emit('on-change',val)是触发自定义事件on-change，用于告知父组件数字输入框的值有所变化。
在生命周期mounted钩子里也调用了updateValue()方法，是因为第一次初始化时，也对value进行了过滤。
input绑定了数据currentValue和原生的change事件，在句柄handleChange函数中，判断了当前输入的是否时数字。
See the Pen Vue组件实例 by whjin (@whjin) on CodePen.
标签页组件
每个标签页的主体内容由使用组件的父级控制，这部分是一个slot，而且slot的数量决定标签切换按钮的数量。
文件目录：
-
index.html入口页 -
style.css样式表 -
tabs.js标签页外层的组件tabs -
pane.js标签页嵌套的组件pane
pane需要控制标签页内容的显示与隐藏，设置一个data:show，并且用v-show指令来控制元素。
getTabs是一个公用的方法，使用this.$children来取到所有的pane组件实例。
在methods中使用了有function回调的方法时，在回调内的this不再执行当前的Vue实例，也就是tabs组件本身，需要在外层设置一个_this=this的局部变量来间接使用this。
遍历每一个pane组件后，把它的label和name提取出来，构成一个Object并添加到数据navList数组里。
在使用v-for指令循环显示tab标题时，使用v-bind:class指向了一个名为tabCls的methods来动态设置class名称。
点击每个tab标题时，会触发handleChange方法来改变当前选中tab的索引，也就是pane组件的name。在watch选项中监听了currentValue，当其发生变化时，触发updateStatus方法来更新pane组件的显示状态。
使用组件嵌套的方式，将一系列pane组件作为tabs组件的slot；tabs组件和pane组件通信上，使用了$parent和$children的方法访问父链和子链；定义了prop:value和data:currentValue，使用$emit('input')来实现v-model的用法。
See the Pen Vue-tabs by whjin (@whjin) on CodePen.