2023/08/28

使用vue在html中创建通用组件WebComponents

使用vue制作跨平台通用组件

在html中使用vue定义组件#

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 组件测试</title>

</head>
<body>
    <my-vue-element></my-vue-element>

    <script type="module">
        import { defineCustomElement } from '//cdn.staticfile.org/vue/3.3.4/vue.esm-browser.prod.min.js'
        const MyVueElement = defineCustomElement({
        // 这里是同平常一样的 Vue 组件选项
        props: {},
        emits: {},
        template: `<h2>my-vue-element {{text}}</h2>`,

        // defineCustomElement 特有的：注入进 shadow root 的 CSS
        styles: [`/* inlined css */`],
        data() {
            return { text:'' };
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
            this.text = '123';
            },    
        }
        })

        customElements.define('my-vue-element', MyVueElement)
    </script>
</body>
</html>

由上面代码可以看出来，和vue自身的语法非常接近，即只要掌握好vue基本语法和生命周期就可以快速创建组件。创建好的网页组件可以用在任意框架下面使用。

为了方便使用，组件都使用单独的js文件存放，然后在html中使用script标签引入即可。type="module"必须加上，否则会报错。

<script src="./ztime/index.js" type="module"></script>

<z-time :state="timeState"></z-time>

这样的话就可以愉快的开发跨平台组件使用了。

使用这种组件需要注意的事：

  • 生成的组件的是标准Web Components组件
  • slot插槽是原生语法，不支持作用域插槽（v-slot）
  • SFC需要基于vite或者webpack进行编译，不能直接使用在html中

参考文章#

分类: 文章
标签: vuecustomElementsWebComponents