Vue常用组件的开发

cnsworder 发布于2019-08-26 12:01 / 930人阅读

摘要：监听的回调里，在使用时改变，是触发自定义事件，用于告知父组件数字输入框的值有所变化。组件实例组件实例标签页组件每个标签页的主体内容由使用组件的父级控制，这部分是一个，而且的数量决定标签切换按钮的数量。

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

实战：常用组件的开发

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

GPU云服务器云服务器 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108028.html

手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

fredshare 2019-08-02 14:02 评论0 收藏0
手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

Pink 2019-08-23 14:28 评论0 收藏0
Vue UI框架库开发介绍

摘要：本文大家了解如何开发一个框架。伪组件化我们知道，组件化开发的目的是解耦功能，提高代码复用率和开发效率，进而加快项目开发周期与产品发布速度。公司自有的库一般不可能发布到仓库。这样我们就实现了插件的开发。主要就是利用这个特性开发的。本文大家了解如何开发一个Vue UI框架。Vue UI框架demo 源码地址： https://github.com/xubaodian/... 。平时在项...

liangdas 2019-08-23 14:30 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0