Vue经常使用组件的开发

查看 原文站点，更多扩展内容及更佳阅读体验！

实战：经常使用组件的开发

数字输入框只能输入数字，并且有两个快捷按钮，能够直接减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函数中，判断了当前输入的是否时数字。

<p data-height="365" data-theme-id="0" data-slug-hash="oyzBWM" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue组件实例" class="codepen">See the Pen Vue组件实例 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

标签页组件

每一个标签页的主体内容由使用组件的父级控制，这部分是一个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的用法。

<p data-height="365" data-theme-id="0" data-slug-hash="vrXWQw" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-tabs" class="codepen">See the Pen Vue-tabs by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>