调用鸿蒙原生组件

在 WebView 中使用 embed 来渲染原生组件，在 Vue 文件中使用的 embed 组件是经过 uni-app 封装的，更便于使用，支持传递额外的属性和事件。

属性

属性名	类型	说明
tag	string	必填，原生组件的标签名
options	object	可选，原生组件的属性集合，具体属性请参考原生组件 BuilderOptions 中的定义，更新时需要对 options 重新赋值

事件

所有 embed 组件上注册的事件均会转发到原生层。

示例代码

<template>
    <embed class="native-button" tag="button" :options="options" @click="onClick"></embed>
</template>

<script>
    export default {
        data() {
            return {
                options: {
                    label: 'hello'
                }
            }
        },
        methods: {
            onClick(e) {
                console.log('onClick', e.detail.text)
                this.options = {
                    label: 'world'
                }
            }
        }
    }
</script>

<style scoped>
    .native-button {
        display: block;
        width: 200px;
        height: 50px;
        margin: 10px auto;
    }
</style>

完毕