如何将 vanilla .js 添加到自定义 Vue 组件答案

【问题标题】：How to add vanilla .js to a custom Vue component如何将 vanilla .js 添加到自定义 Vue 组件
【发布时间】：2017-09-26 16:54:42
【问题描述】：

我正在尝试将一个简单的date-picker 添加到自定义 vue 组件中。我没有使用 webpack，所以我想避免使用现成的 .vue 组件，我更了解如何将简单的 javascript 添加到 vue。

我关注this official vue tutorial

我也见过this codepen，但我无法让日期选择器出现。

这是我的jsfiddle：

HTML：

<div class="app">
  <datepicker id='date-elem'></datepicker>
</div>

app.js：

Vue.component('date-picker', {
  extends: Flatpickr,
  mounted () {
    this.Flatpickr(date-elem, {})}
})

如何在不需要 .vue 文件、webpack 等的情况下轻松地将 vanilla js 集成到 Vue 组件中？

【问题讨论】：

IIRC，你需要建立一个指令。
但是例如this vue example 使用了组件，为什么你认为指令更好？
Vue IS Javascript，只需将其弹出一个方法并调用 this.methodName() 或 var lib = require('库'); lib.method()
但我尝试了this 之类的方法，但仍然没有...

标签： javascript vue.js vuejs2 vue-component flatpickr

【解决方案1】：

所以你在这里有一些误解。要使它成为一个组件（一个非常基本的组件），您可以这样做。

在 Vue 中，您通常不会扩展外部 Javascript 库。您通常会制作的称为包装器组件。本质上，一个 Vue 组件处理与外部库的所有交互。在这种情况下，您想使用 Flatpickr。从documentation，您需要使用new Flatpickr(element, options)。所以我们可以在 mounted 事件中做到这一点，传递 this.$el 这将指向根 Vue 组件元素。

Vue.component('date-picker', {
    template: "<input type='text'>",
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

这是您更新后的fiddle。

但是这个组件做的并不多。它只允许您选择一个日期。为了允许在组件外部使用该日期，我们希望扩展它以支持v-model。以下是您可以这样做的方法。

Vue.component('date-picker', {
    props:["value"],
    data(){
        return {
            selectedDate: this.value
        }
    },
    template: "<input type='text' v-model='selectedDate' @input='onInput'>",
    methods:{
        onInput(){
            this.$emit('input', this.selectedDate)
        }
    },
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

现在，你可以这样使用了。

<date-picker v-model="selectedDate"></date-picker>

并且 selectedDate 将收到您选择的日期。

这是一个fiddle 显示。

【讨论】：