VUE3之其它组件

Render函数

基本使用

render函数用于渲染html元素，用于利用JavaScript实现在template标签中做不了的事情。render提供一个h函数来构造元素，h函数的第一个参数是元素类型，第二个参数是元素的属性，第三个参数是元素的子组件：

<script>
import {h} from 'vue';
  export default {
    render() {
      return h("h2",{class:"title"},"hello render");
    },
  }
</script>

render函数实现计数器

<script>
import {h} from 'vue';
  export default {
    data() {
      return {
        counter:0
      }
    },
    render() {
      return h("div",{class:"app"},[
        h("h2",null,`当前计数：${this.counter}`),
        h("button",{
          onClick:()=>this.counter++
        },"+1"),
        h("button",{
          onClick:()=>this.counter--
        },"-1"),
      ]);
    },
  }
</script>

setup函数也可以完成替代render函数的功能：

<script>
import {h,ref} from 'vue';
  export default {
    setup(props) {
      const counter=ref(0);
      return ()=>{
        return h("div",{class:"app"},[
        h("h2",null,`当前计数：${counter.value}`),
        h("button",{
          onClick:()=>counter.value++
        },"+1"),
        h("button",{
          onClick:()=>counter.value--
        },"-1"),
      ]);
      }
    },
  }
</script>

插槽的使用

// HelloWorld.vue
<script>
import { h } from 'vue';
    export default {
        render() {
            return h("div",null,[
                h("h2",null,"hello world"),
                this.$slots.default? this.$slots.default({name:"sk"}):h("span",null,"我是hello world的默认插槽") 
            ]);
        },
    }
</script>

// App.vue
<script>
import {h} from 'vue';
import HelloWorld from './HelloWorld.vue';
  export default {
    render() {
      return h(HelloWorld,{},{
        default: props=>h("span",null,`App传入HelloWorld的内容: ${props.name}`)
      });
    },
  }
</script>