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>

然后看瀏覽器效果