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

Question

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

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

所以我尝试了以下方法:

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。

您正在将选项作为 Prop 传递，因此您需要将其作为 Prop 添加到您的 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>