methods functions can be used in custom elements
What problem does this feature solve?
Functions in methods cannot be called directly from a custom element(在自定义元素中无法直接调用methods中的方法)
What does the proposed API look like?
methods functions can be used in custom elements(methods的函数可以在自定义元素上使用)
example(示例)
// setup
// Button.ce.vue
<script setup>
import { defineExpose } from 'vue'
const test = ()=>{
console.log('123')
}
defineExpose({
test
})
</script>
<template>
<div class="btn">
<slot></slot>
</div>
</template>
// option
// Button.ce.vue
<script>
import { defineComponent } from 'vue'
defineComponent({
methods: {
test(){
console.log('123')
}
}
})
</script>
<template>
<div class="btn">
<slot></slot>
</div>
</template>
// app.vue
<script setup>
import { defineCustomElement, onMounted } from 'vue'
import Button from './Button.ce.vue'
const IButton = defineCustomElement(Button)
customElements.define('i-button', IButton)
onMounted(()=>{
document.querySelector('#test').test() // like this(这种方式调用)
})
</script>
<template>
<div>
<i-button id="test">test</i-button>
</div>
</template>