22 - 自定义元素

[webfanrc]

<script setup lang='ts'>

import { onMounted, defineCustomElement, h } from "vue"

/**
 * Implement the code to create a custom element.
 * Make the output of page show "Hello Vue.js".
*/
const VueJs = defineCustomElement({
  // normal Vue component options here
  props: {message:String},
  render(){
    return h('div',null,this.message)
  }
})


// define
customElements.define('vue-js', VueJs)

// 出现“Failed to execute 'define' on 'CustomElementRegistry': the name "vue-js" has already been used with this registry
// ”刷新页面即可


onMounted(() => {
  document.getElementById("app")!.innerHTML = "<vue-js message=\"Hello Vue.js\"></vue-js>"
})

</script>

<template>
  <div id="app"></div>
</template>