Vue常用组件的开发

2024年5月25日 268次阅读 来源: whjin

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

实战：常用组件的开发

数字输入框只能输入数字，而且有两个快捷按钮，可以直接减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>

    原文作者：whjin
    原文地址: https://segmentfault.com/a/1190000015215564
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞