今天看vue3中文文档 看到函数式组件不太理解上面写的 然后自己写了一下才理解上面的自己记录一下
先在子组件里面写上
<script> // dynameic 组件 import { h } from "vue"; // Vue3 中函数式组件只能用函数式声明 const DynamicHeading = (props, context) => { console.log(context); return h(`h${props.level}`, context.attrs, context.slots); }; DynamicHeading.props = ["level"]; export default DynamicHeading; </script>
父组件里面
<template> <dynamic-heading level="5">年后</dynamic-heading> </template> <script> import dynamicHeading from './dynameic.vue' export default { components:{ dynamicHeading } } </script>
浏览器上面效果
我们传个1试试
但是我想自己创建一个div然后我这样试h函数第一个函数不就是标签嘛 那我写个div就完事了 看见第三个参数有个slots 这个应该是插槽我直接在插槽里面写东西就完事了
<script> // dynameic 组件 import { h } from "vue"; // Vue3 中函数式组件只能用函数式声明 const DynamicHeading = (props, context) => { console.log(context); context.slots = `你好${props.level}` return h(`div`, context.attrs, context.slots); }; DynamicHeading.props = ["level"]; export default DynamicHeading; </script> //父组件代码 <template> <dynamic-heading level="攻城师"></dynamic-heading> </template> <script> import dynamicHeading from './dynameic.vue' export default { components:{ dynamicHeading } } </script>
然后看浏览器效果