經過今天一整天的努力，終于發布了第一個屬于我自己的vue組件。靈感來源于寫一個那年今日的小demo，在網上找只選擇月份，日期的組件一直沒有找到。于是打算自己寫一個，寫完之后想著既然網上沒有，何不發在網上和大家一起分享呢，于是花了一天的時間將我的組件發布到了npm上。由于這個組件是基于elementUI的，所以用這個組件同時也需要下載element的依賴。下面我簡單的給大家介紹一下用法：

1.安裝依賴

命令：npm install monthes-daysnpm i element-ui -S

開始想叫month-dayes的名字，發現已經發布了，畢竟先到先得嘛，就取了個這個名字。忽略我的英語，難受。

2.配置main.js

在main.js里面添加下面的內容：

import ElementUI from 'element-ui'; import monthesDays from 'monthes-days' import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI); Vue.use(monthesDays);

'monthes-days’也可以自己想在哪個文件使用就在那個文件import，可以不用全局引入。

3.在vue中使用

我們在需要組件的地方引用即可：

<monthes-days></monthes-days>

接下來我們看看效果：

咦，這個邊框我記得寫的時候去掉了，總感覺有點丑。這里我們先辦法去掉一下。

在組件的style中加入如下代碼：

<style>.el-popover{padding:0;} </style>

然后我們再來看下：

當然這是配置的全局的樣式，肯定是不好的。

那么我們就需要scoped穿透：關于這個知識點，大家應該知道，我就不廢話了，網上也可以找到相應的教程。

4.得到選中的值

由于技術水平有限，所以這個組件完全相當于一個子組件使用，所以我們在父組件中得到子組件的值即可，具體代碼如下：

<template><monthes-days v-on:getValue="getValue"></monthes-days> </template><script> export default {methods:{getValue(val){console.log(val)}} } </script>

這樣就可以得到我們選中的值啦！

5.說明

我也是第一次發布，還有很多東西可能說的不明白，小組件肯定也有不足的地方，希望大家多多指教。一起加油，一起努力！

總結

以上是生活随笔為你收集整理的基于vue的选择月日组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。