Как я могу использовать веб-компоненты в Vue приложении, используя Typescript - PullRequest
Новая
       21

Как я могу использовать веб-компоненты в Vue приложении, используя Typescript

0 голосов
/ 02 апреля 2020

Я пытаюсь использовать веб-компонент в моем Vue проекте. Тем не менее, это не правильно загружается. Я могу видеть элемент в моем DOM, но это просто пустой тег, а не кнопка, которой он должен быть. Первая ошибка, которую я получил, заключалась в том, что не было объявлено ни одного модуля, поэтому я объявил его, основываясь на предложении сообщения об ошибке в файле tsconst.d.ts: 

declare module 'wc-button';

Теперь я получаю предупреждение в консоли от Vue что это неизвестный пользовательский элемент, и если я забуду зарегистрировать его в компонентах. Но, поскольку это веб-компонент, я не верю, что так и должно быть. Я могу удалить сообщение go, добавив веб-компонент к vue .config.ignoredElements, но это просто скрывает сообщение. Если я переключу свой код на javascript, он будет работать нормально. Поэтому я ожидаю, что мне нужно правильно объявить модуль для него, но я не уверен, что делать дальше. У кого-нибудь есть примеры или репо, с которыми я мог бы сравнить?

Мой компонент: 

<template>
  <div>
    <button class="btn btn-primary" @click="onClick()">
      Click!
    </button>
    <wc-button type="primary" @click="onClick()">
      Click
    </wc-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import wcButton from 'wc-button';

export default Vue.extend({
    data: () => ({
        buttonOutput: 'I was clicked!',
    }),
    methods: {
        onClick(): string {
            return this.buttonOutput;
        },
    },
});
</script>

1 Ответ

0 голосов
/ 07 апреля 2020

Нашел обходной путь, импортировав веб-компонент в мое приложение. js, откуда запускается приложение Vue. Это немного глупо, но это позволяет мне избежать всех проблем с машинописью, которые блокировали меня.

...