h函數(shù)的使用方法
## h函數(shù)
### h() 函數(shù)是一個用于創(chuàng)建 vnode 的一個函數(shù)
#### 其實更準確的命名是 createVNode() 函數(shù),但是為了簡便在Vue將之簡化為 h() 函數(shù)
### h函數(shù)的使用
#### 它接受三個參數(shù):("標簽名|組件",插入標簽內(nèi)的屬性|事件,向這個標簽|組件內(nèi)插入的內(nèi)容)
##### 有時為了避免產(chǎn)生歧義,可以將null作為第二個參數(shù)傳入,將children作為第三個參數(shù)傳入
### h函數(shù)的基本使用
#### 簡單寫法
import {h} from 'vue'
export default {
?name: 'Home',
?render() {
? ?return ?h("span",{class:"sp"},"我是h出來的span")
?},
}
#### 多數(shù)據(jù)寫法
import {h} from 'vue'
export default {
?
?render() {
? ?return h("div",null,[
? ? ?h("h2",null,"about"),
? ? ?h("span",{class:"sp"},"我是h出來的span")
? ?])
?},
}
### 函數(shù)組件和插槽的使用
home組件
import about from './About.vue'
import {h} from 'vue'
export default {
?name: 'Home',
?render() {
? ?return ?h(about,null,
? ?{
? ? ?default1: props=>h("span",null,`"我是home傳給about的具名插槽"+${props.name}`) //這個default1就是插槽的名字
? ?}
?)
?},
}
about組件
import {h} from 'vue'
export default {
?
?render() {
? ?return h("div",null,[
? ? ?h("h2",null,"about"),
? ? ?this.$slots.default1?this.$slots.default1({name:'xwl'}):h("h2",null,"aboutDefault"),
? ?])
?},
}



標簽: