渲染函数h()实例
2023-12-21 01:34:38
?App.vue
<script setup lang="ts">
import MyButton from "./MyButton"
const onClick = () => {
console.log("onClick")
}
</script>
<template>
<MyButton :disabled="false" @custom-click="onClick">
my button
</MyButton>
</template>
MyButton.ts
import { defineComponent,h } from "vue"
export default defineComponent({
name: 'MyButton',
props: {
disabled: Boolean,
},
emit: ['custom-click'],
render() {
return h('button',{ disabled: this.disabled , onClick: ()=>{
this.$emit('custom-click')
}},this.$slots)
}
})
或者setup写法
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'MyButton',
props: {
disabled: {
type: Boolean,
default: false,
},
},
emits: ['custom-click'],
setup(props, { emit, slots }) {
return () =>
h(
'button',
{
disabled: props.disabled,
onClick: () => emit('custom-click'),
},
slots.default?.()
);
},
});
文章来源:https://blog.csdn.net/content6/article/details/135088440
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!