Question

我没有完整的vue应用，所以我使用custom elements来替换应该用vue处理的一些元素。

我只是想在html文件中使用vue multiselect plugin。

所以我尝试了以下内容：

index.ts

import Vue from "vue"
import VueCustomElement from 'vue-custom-element'
import Autocomplete from "./vue/autocomplete.vue"

Vue.use(VueCustomElement);
Vue.customElement('auto-complete', Autocomplete);

的test.html

<auto-complete
        v-model="value"
        :options="options"
        placeholder="test"
        @search-change="getData"
>
</auto-complete>

test.vue

<template>
    <multiselect v-model="value" :options="options" @search-change="getData"></multiselect>
</template>

<script type="ts">
    const Multiselect = require('vue-multiselect').default

    export default {
        components: { Multiselect },
        data () {
            return {
                value: 'test',
                options: ['list', 'of', 'options']
            }
        },
        methods: {
            getData (query) {
                console.log(123)
            }
        }
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

在输出中，始终忽略自定义元素的数据，并且仅使用.vue文件中的部分中的参数。

如何从自定义元素中使用占位符或@ search-change等参数？

Answer 1

我也在我的一个项目中使用了vue-custom-elements。

您将选项作为道具传递，因此您需要将其添加为autocomplete.vue中的道具。

<template>
    <multiselect v-model="value" :options="options" @search-change="getData"></multiselect>
</template>

<script type="ts">
    const Multiselect = require('vue-multiselect').default

    export default {
        props: ['options'],
        components: { Multiselect },
        data () {
            return {
                value: 'test'
            }
        },
        methods: {
            getData (query) {
                console.log('123')
            }
        }
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

如何将参数从vue自定义元素传递到vue组件？

1 个答案: