javascript - 如何将 vanilla .js 添加到自定义 Vue 组件

Question

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

我正在关注 this official vue tutorial

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

这是我的 jsfiddle :

HTML:

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

应用程序.js:

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

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

Answer 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表明这一点。