Vue通过Render向子组件中传递作用域插槽

最新推荐文章于 2024-06-20 16:55:34 发布

Tong XU

最新推荐文章于 2024-06-20 16:55:34 发布

阅读量1.9k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41700374/article/details/105243124

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个详细的示例，展示了如何在Vue.js中使用render函数向子组件传递作用域插槽，帮助读者深入理解作用域插槽的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test_render</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="app">
			<my-div></my-div>
		</div>
		
		<script>
			
			Vue.component('my-div', {
				render(createElement) {
					return createElement('div', [
						createElement('child', {
							scopedSlots: {
								default(props) {
									return [
										createElement('span', props.text)
									]
								}
							}
						})
					])
				}
			})
			
			Vue.component('child', {
				render(createElement) {
					return createElement('strong', this.$scopedSlots.default({
						text: 'i am xutong'
					}))
				}
			})
			
			new Vue({
				el: '#app'
			})
			
		</script>
		
	</body>
</html>

写了一个demo帮助大家理解在render中如何向子组件传递作用域插槽。