Vue学习笔记4.7 插槽作用域 slot-scope

ゞ浴缸里的玫瑰 2022-03-22 13:50 209阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>作用域插槽</title>
    	<meta charset="utf-8">
    	<script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<child>
    
    			<template slot-scope="props" slot="abc">
    				
    				<li>{
       {props.item}}---Hello</li>
    			</template>
    			<template slot-scope="props" slot="aaa">
    				<h1>{
       {props.item}}----Hello</h1>
    			</template>
    		</child>
    	</div>
    </body>
    
    	<script type="text/javascript">
    		Vue.component('child', {
    			data: function() {
    				return {
    					list: [1, 2, 3, 4]
    				}
    			},
    			// template: `<div>
    			// 			
    			// 			  	<ul>
    			// 					<li v-for="item of list">
    			// 						{
       {item}}
    			// 					</li>
    			// 				</ul>
    			// 			</div>`
    			template: `<div>
    						<ul>
    							
    							<slot v-for="item of list" :item=item name="abc"></slot>
    							<slot v-for="item of list" :item=item name="aaa"></slot>
    						</ul>
    						</div>`
    		})
    
    		var vm = new Vue({
    			el:'#app'
    		})
    	</script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue插槽、具名插槽和作用域插槽

槽使用场景是；如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接按下面这样写，是不可以实现的，因为如果me-component没有包含一个 `<slo...

不念不忘少年蓝@/ 2024年04月17日 16:00/ 0 赞/ 89 阅读

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

目录总结 1.默认插槽 2.具名插槽 3.作用域插槽一、不使用插槽的效果 App.vue Category.vue 二、默认插槽 App.vue

浅浅的花香味﹌/ 2024年04月06日 10:08/ 0 赞/ 104 阅读

相关 Vue作用域插槽的使用

关于vue插槽，也用过很多次了，但是关于作用域插槽的用法，有些模糊，查了很多文档，自己理解记忆。在[官网上][Link 1]说： ![在这里插入图片描述][202001

ゝ一世哀愁。/ 2023年06月28日 14:28/ 0 赞/ 124 阅读

相关 Vue table及作用域插槽

示例代码： <template> <div> <el-table :data="tableData" style="width: 100%

浅浅的花香味﹌/ 2022年12月23日 06:43/ 0 赞/ 229 阅读

相关 Vue中的插槽和作用域插槽

重点：作用域插槽。如果需要用一句话去总结`作用域插槽`，那就是`在父组件中访问子组件的数据`，或者从`数据流向`的角度来讲就是`将子组件的数据传递到父组件`

我会带着你远行/ 2022年12月16日 09:03/ 0 赞/ 236 阅读

相关作用域插槽

当我们希望数据由子组件提供，页面结构由父组件提供，这种情况下我们可以作用域插槽。 v-slot 子组件中有数据，但是需要在父组件中控制页面结构子组件： <

青旅半醒/ 2022年11月30日 15:40/ 0 赞/ 214 阅读

相关 vue的作用域插槽

vue中的插槽，他的作用域有了解过吗~~~~知道你没有，跟我来了解了解插槽的作用区域，顾名思义就是这个插槽使用像js的作用域一样，有一定的作用范围，比如子组件在插槽中已经定

骑猪看日落/ 2022年10月27日 01:34/ 0 赞/ 214 阅读

相关 Vue 作用域插槽

Vue 作用域插槽 : [Vue 作用域插槽 - 简书][Vue _ -] 深入理解vue中的slot与slot-scope 写在前面 vue中关于插槽的文档

冷不防/ 2022年09月17日 06:14/ 0 赞/ 240 阅读

相关 Vue学习笔记4.7 插槽作用域 slot-scope

<!DOCTYPE html> <html> <head> <title>作用域插槽</title> <meta charset="

ゞ浴缸里的玫瑰/ 2022年03月22日 13:50/ 0 赞/ 210 阅读

相关 Vue 作用域插槽

原博出处：作者：SentMes 链接：[SentMes作者书写的作用于插槽链接][SentMes] https://www.jianshu.com/p/0c95

╰+哭是因爲堅強的太久メ/ 2021年07月24日 12:22/ 0 赞/ 490 阅读