Как импортировать компонент Vue, упакованный в библиотеку JavaScript? - PullRequest
Новая
       78

Как импортировать компонент Vue, упакованный в библиотеку JavaScript?

1 голос
/ 14 марта 2020

Я пытаюсь упаковать компонент Vue в библиотеку JavaScript, а затем использовать его в другом проекте, используя vue -sf c -rollup .

Я могу упаковать компонент так, как говорит README. Затем, когда я копирую файл .min. js в другой проект и пытаюсь использовать компонент, я всегда получаю ошибку: 

Vue warn handler:  Failed to mount component: template or render function not defined.

Способ, которым я пытаюсь использовать компонент из другого Vue компонент такой: 

import Vue from 'vue'
import MyComponent from '../lib/my-components.min.js'
Vue.use(MyComponent)

Затем в разделе компонентов: 

components: {
    'my-component': MyComponent
}

Затем в шаблоне: 

<my-component></my-component>

Чего мне здесь не хватает ? Как правильно использовать компонент в другом проекте?

РЕДАКТИРОВАТЬ: Добавление кода компонента в ответ на комментарий. 

<template>
    <div class="my-component">
        <p>The counter was {{ changedBy }} to <b>{{ counter }}</b>.</p>
        <button @click="increment">
            Click +1
        </button>
        <button @click="decrement">
            Click -1
        </button>
        <button @click="increment(5)">
            Click +5
        </button>
        <button @click="decrement(5)">
            Click -5
        </button>
        <button @click="reset">
            Reset
        </button>
    </div>
</template>

<script>
    export default {
        name: 'MyComponent', // vue component name
        data() {
            return {
                counter: 5,
                initCounter: 5,
                message: {
                    action: null,
                    amount: null,
                },
            };
        },
        computed: {
            changedBy() {
                const {
                    message
                } = this;
                if (!message.action) return 'initialized';
                return `${message?.action} ${message.amount ?? ''}`.trim();
            },
        },
        methods: {
            increment(arg) {
                const amount = (typeof arg !== 'number') ? 1 : arg;
                this.counter += amount;
                this.message.action = 'incremented by';
                this.message.amount = amount;
            },
            decrement(arg) {
                const amount = (typeof arg !== 'number') ? 1 : arg;
                this.counter -= amount;
                this.message.action = 'decremented by';
                this.message.amount = amount;
            },
            reset() {
                this.counter = this.initCounter;
                this.message.action = 'reset';
                this.message.amount = null;
            },
        },
    };
</script>

<style scoped>
    .my-component {
        display: block;
        width: 400px;
        margin: 25px auto;
        border: 1px solid #ccc;
        background: #eaeaea;
        text-align: center;
        padding: 25px;
    }

    .my-component p {
        margin: 0 0 1em;
    }
</style>

1 Ответ

1 голос
/ 15 марта 2020

Я нашел один способ сделать это в этом вопросе переполнения стека: Зарегистрировать локальный Vue. js компонент динамически .

Я получил его к работе, реализовав более простую версию решения показано там. Я удалил секцию компонента из внешнего компонента, затем добавил хук жизненного цикла create (): 

created() {
    console.log('pages/PageHome.vue: created(): Fired!')
    // From https://stackoverflow.com/questions/40622425/register-local-vue-js-component-dynamically
    // "This is how I ended up importing and registering components dynamically to a component locally"
    const componentConfig = require('../lib/components/my-component.js')
    console.log('pages/PageHome.vue: created(): componentConfig.default = ')
    console.log(componentConfig.default)
    const componentName = 'my-component'
    console.log('pages/PageHome.vue: componentName = ' + componentName)
    this.$options.components[componentName] = componentConfig.default
}

Компонент импортируется с помощью вызова require(), затем регистрируется локально, добавляя его в this.$options.components dictionary , Секретный соус добавляет .default к выражению componentConfig. Кажется, это нигде официально не задокументировано.

Ред. Коммент .: Я удивлен, что документация Vue уделяет так мало внимания шаблонам распределения для повторного использования. Как бы ни были Vue документы, это явное упущение.

...