JSX实现作用域插槽

最新推荐文章于 2024-05-06 17:05:26 发布

Seven_Ting

最新推荐文章于 2024-05-06 17:05:26 发布

阅读量458

点赞数

文章标签： vue.js java javascript

本文链接：https://blog.csdn.net/Seven_Ting/article/details/130120597

版权

ScopedSlotDemo.jsx

import { defineComponent } from "vue";
import child2 from './child2'

export default defineComponent(() => {
	function renderName(msg){
		return <p>姓名:{msg}</p>
	}
	return () => {
		return <>
			<p>简隋英</p>
			<child2 render1={renderName}></child2>
		</> 
	}
})

child2.jsx

import { defineComponent, ref } from "vue";

export default defineComponent({
	props:['render1'],
	setup(props) {
		const msgRef = ref('李玉')
		return () => {
			return <p>{props.render1(msgRef.value)}</p>
		}
	}
})

总结：JSX实现作用域插槽的原理主要是，将父组件内需要渲染的内容元素封装成一个函数，当做props传递给子组件，子组件渲染数据，直接执行该函数进行传值