Vue组件编写

2024-09-03 03:33:01

Vue无疑是近来最火的一个前端框架，它吸取了angular1.x和react的精华，性能优良，而且易于上手，本文主要是关于如何去写一个组件。

首先是项目目录

编写组件

在这里我写了一个日期控件（移动端的），在components目录下建立文件夹，并建立vue文件和index.js文件注册组件。

.vue文件中的内容我就不多说了，去看我的项目即可。

组件注册

import datepicker from './datepicker.vue'

//这里第一个参数可以设置别的名字，作为页面标签使用

datepicker.install = (Vue) => Vue.component('datepicker',datepicker)

export default datepicker

组件使用

import datepicker from './components/datepicker'

import Vue from 'vue'

Vue.use(datepicker);

//html中

<datepicker @cancle="cancle" @sure="sure" :selecteddate="olddate"></datepicker>

最后附上代码地址https://github.com/Stevenzwzhai/vue-datepicker

演示地址 https://stevenzwzhai.github.io/vue-datepicker/。打开mobile调试模式，因为使用了touch事件，所以pc无效。

最新文章

热门文章