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

实战:常用组件的开发

数字输入框只能输入数字,而且有两个快捷按钮,可以直接减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的问题,但是如果从父组件修改了valueinput-number组件的currentValue也要一起更新。

监听(watch),watch选项用来监听某个propdata的改变,当它们发生变化时,就会触发watch配置的函数,从而完成业务逻辑。

从父组件传递过来的value可能不符合当前条件(大于max,或小于min),所以在methods中写了一个方法updateValue,用来过滤出一个正确的currentValue

watch监听的数据的回调函数有2个参数可用,第一个是新的值,第二个是旧的值。

在回调函数里,this指向当前组件实例。所以可以直接调用this.updateValue(),因为Vue代理了propsdatacomputedmethods

监听currentValue的回调里,this.$emit('input',val)在使用v-model时改变valuethis.$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组件后,把它的labelname提取出来,构成一个Object并添加到数据navList数组里。

在使用v-for指令循环显示tab标题时,使用v-bind:class指向了一个名为tabClsmethods来动态设置class名称。

点击每个tab标题时,会触发handleChange方法来改变当前选中tab的索引,也就是pane组件的name。在watch选项中监听了currentValue,当其发生变化时,触发updateStatus方法来更新pane组件的显示状态。

使用组件嵌套的方式,将一系列pane组件作为tabs组件的slottabs组件和pane组件通信上,使用了$parent$children的方法访问父链和子链;定义了prop:valuedata: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>

本文固定链接: http://www.js-code.com/vue-js/vue-js_27685.html