Vue3渲染函数的传参与使用

使用渲染函数和setup标签渲染子组件并传递参数

使用渲染函数

假设有一个子组件Child.vue，它接收一个props叫name，并在模板中显示它：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

如果想在父组件中使用h()函数来渲染这个子组件，并传递一个name参数，可以这样写：

<template>
  <div id="app">
    {{ renderChild }}
  </div>
</template>

<script>
import { h } from 'vue'
import Child from './components/Child.vue'

export default {
  data() {
    return {
      name: 'Vue3'
    }
  },
  computed: {
    renderChild() {
      return h(Child, { name: this.name })
    }
  }
}
</script>

这样，就可以在页面上看到Child组件渲染出来，并显示name的值

使用setup语法

需要在script标签上添加setup属性，表示为setup脚本
可以直接使用defineProps()函数来定义props
可以直接使用defineEmits()函数来定义emit事件
可以直接使用

基于以上特点，可以将Child.vue重写为：

<template>
  <div>{{ name }}</div>
</template>

<script setup>
// 定义props
const props = defineProps({
  name: String
})

// 解构props
const { name } = props
</script>

这样，就可以在子组件中使用name变量，并且不影响父组件中h()函数的使用。

不使用setup语法

需要导出一个对象包含props、data、computed等选项
需要通过this关键字来访问props中的属性
需要导出一个render函数或者使用

基于以上特点，可以将Child.vue重写为：

<script>
export default {
  props: {
    name: String
  },
  render() {
    // 使用h()函数创建一个div元素，并显示name属性
    return h('div', this.name)
  }
}
</script>

或者：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

这样，就可以在子组件中使用name属性，并且不影响父组件中h()函数的使用。

Vue3渲染函数的传参与使用

使用渲染函数

使用setup语法

不使用setup语法

相关参考文档