vue3 函数式组件

今天看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>

然后看浏览器效果