可以在 webcomponent 中使用 vuejs 嗎？

Question

VueJS 可以用於對 Web 組件內的行為進行編碼嗎？ 我的意思是：如果 vuejs 庫作為腳本引用加載，那么它可以像在普通的 html 頁面中一樣使用，但在 web 組件的定義中使用嗎？

Answer 1

是的，您可以將 vuejs 包裝在 web 組件中，您只需要 .vue 文件和來自 vuejs 的名為https://github.com/vuejs/vue-web-component-wrapper的幫助程序庫

使用起來非常簡單！！！

這是 Component.vue 文件

<template>
  <div>
    <h1>My Vue Web Component</h1>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
  export default {
    props: ['msg'] 
  }
</script>

這是 main.js 文件

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/Component'; //this is your component file

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define('my-web-component', WrappedElement);

有關更多信息，請訪問https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200