h函数 vue3渲染函数的变化( 二 ) _生活百科

//页面使用 renderTest.vue这个组件<template><div class="father-div"><renderTest title="父组件给的数据"></renderTest></div></template><script setup lang="ts">import renderTest from './renderTest.vue'</script>

文章插图
emit 子传父

//renderTest.vue 文件<script lang="ts">import { h } from 'vue'//把按钮作为标签需要导入import { ElButton } from 'element-plus'export default {props: {title: {type: String}},setup(props, { emit }) {return () =>h('div',null,[//把按钮作为标签需要导入h(ElButton, {type:"primary",// 注意这里需要使用箭头函数，onClick: () => emit('myClick', '123')},//第三个参数建议使用函数返回 。否者在控制有警告// Non-function value encountered for default slot. Prefer function slots for better performance.()=>'点击我')])}}</script>

//页面使用 renderTest.vue这个组件<template><div class="father-div"><renderTest @myClick="myClick"></renderTest></div></template><script setup lang="ts">import renderTest from './renderTest.vue'const myClick = (mess:string) => {console.log('子组件给的数据', mess)}</script>

文章插图
需要注意的点

1.如果使用ElButton作为标签 。需要引入import { ElButton } from 'element-plus' 。否则在页面中无法正常解析 。2. 第三个参数建议使用函数返回 。否者在控制有警告Non-function value encountered for default slot. Prefer function slots for better performance. 详细地址 ：https://cn.vuejs.org/guide/extras/render-function.html#v-if