如何将 vanilla .js 添加到自定义 Vue 组件 [英] How to add vanilla .js to a custom Vue component

问题描述

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

我正在关注 这个官方 vue 教程

我也看过这个codepen，但我无法做到使日期选择器出现.

这是我的jsfiddle:

HTML:

<datepicker id='date-elem'></datepicker>

app.js:

Vue.component('日期选择器', {扩展:Flatpickr，挂载(){this.Flatpickr(date-elem, {})}})

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

解决方案

所以你在这里有一些误解.要使其成为一个组件(一个非常基本的组件)，您可以这样做.

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

Vue.component('日期选择器', {模板: "",挂载(){new Flatpickr(this.$el, {})}})

这是您更新的 fiddle.

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

Vue.component('日期选择器', {道具:[价值"]，数据(){返回 {选择日期:this.value}},模板:<input type='text' v-model='selectedDate' @input='onInput'>",方法:{输入(){this.$emit('input', this.selectedDate)}},挂载(){new Flatpickr(this.$el, {})}})

现在，您可以像这样使用它.

selectedDate 将收到您选择的日期.

这是一个 fiddle 展示了这一点.

I'm trying to add a simple date-picker to a custom vue component. I'm not using webpack so I want to avoid ready made .vue components and I rather understand how to add simple javascript to vue.

I'm following this official vue tutorial

I've also seen this codepen but I can't manage to make the date picker appear.

This is my jsfiddle:

Html:

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

app.js:

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

How can I easily integrate vanilla js in a Vue component without the need of .vue files, webpack etc?

解决方案

So you have a few misconceptions here. To make this a component (a very basic component), this is how you might do it.

In Vue, you're not going to typically extend an external Javascript library. What you will typically make is called a wrapper component. Essentially, a Vue component that handles all the interaction with the external library. In this case you want to use Flatpickr. From the documentation, you need to use new Flatpickr(element, options). So we can do that in the mounted event, passing this.$el which will point to the root Vue component element.

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

Here is your updated fiddle.

But this component doesn't do very much. It just allows you to pick a date. To allow that date to be used outside the component, we want to extend it to support v-model. Here's how you might do that.

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, {})
    }
})

Now, you can use it like this.

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

And selectedDate will receive the date you pick.

Here is a fiddle showing that.

这篇关于如何将 vanilla .js 添加到自定义 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！