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

【问题标题】：How can I pass parameters from vue custom element to a vue component?如何将参数从 vue 自定义元素传递给 vue 组件？
【发布时间】：2018-09-16 02:28:05
【问题描述】：

我没有完整的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 等参数？

【问题讨论】：

请记住，:options="options" 和 @search-change 在常规 HTML 中不起作用，因为这是 Vue 特定的解决方案。

标签： vue.js custom-element

【解决方案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>

【讨论】：