使用jsx 格式文件和 defineComponent,引用自定义组件,传递属性
父组件中
父组件引用
import demo from './components/demo.jsx'
使用 JSX 实现 slot
这里以antdQ for vue的Popover 气泡卡片,为例子
Vue3语法
<a-popover title="Title"> <template #content> <span>Content</span> </template> <a-button type="primary">Hover me</a-button> </a-popover>
jsx for vue语法
<a-popover title="Title" content={ <> <span>Content</span> </> }> <a-button type="primary">Hover me</a-button> </a-popover>
基础模板
import { defineComponent, onMounted, ref } from 'vue'; export default defineComponent({ // props: ['xx'], setup(props,{ emit }) { onMounted(() => { // ... }) return () => ( <div></div> ) } })