vue scope-slot,vue作用域插槽slot-scope详解
本文主要介绍了对Vue中slot-scope的深入理解。本教程非常适合初学者。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
百度上已经有很多关于slot-scope的文章了，但是感觉都是以前没学好，回去学的人。他们都使用了。Vue文件，我觉得不太适合初学者，所以我就写一个给初学者。
先抛例程：
！声明文档类型
html lang=en
头
meta charset=UTF-8
通过时段/标题分发标题组件的内容
Script src=您的vue地址，请下载最新版本/script
脚本
Vue.component(测试槽，{
//插槽允许有默认内容
模板：
` div
strongError错误！/strong
插槽/插槽
/div
`,
数据：函数(){
返回{
姓名：“佩里”
}
}
});
//命名插槽
Vue.component(插槽名称，{
模板：
` div
页眉
插槽名称=header/slot
/页眉
主要的
插槽/插槽
/main
页脚
插槽名称=页脚/插槽
/页脚
/div
`
});
//作用域插槽
Vue.component(todo-list ，{
inheritantrs:false，
道具：{
todos:[数组，对象]
},
模板：
` ul
Li v-for= todo in todos :key= todo . id style= display:block；
slot:data= todo { { todo . text } }/slot
/李
/ul
`
});
/脚本
风格
李{
列表样式：无；
显示：内嵌-块；
字体大小：25px
}
/风格
/头
身体
div id=应用程序
！-1，slot内容Slot可以接收任何内容，代码，包括组件-
一些不好的事情发生了。你是谁，我认识你吗/测试槽
测试槽
一些不好的事情发生了。
！-允许变量，但变量必须在此范围内才能生效，其中name的值将是 fork-
H3 {{name}}/h3
Img= img/flower.jfif alt=图片无法显示
/测试槽
！-2.命名槽slo有一个特殊的属性名，可以使槽命名为-
插槽名称
H3劝导/h3
p年轻人不努力，老年人悲伤/p
p时光飞逝，日月如梭/p
模板slot=header
保险商实验所
li主页/li
时间差不多了/李
关于李生平/李
李谈未来/李
/ul
/模板
p你好/p
p slot=页脚
End /p
p广东ICP为6545646456415/p
/p
/插槽名称
！-使用作用域插槽，这是通过slot-scope实现的-
todo-list :todos=todos
模板插槽范围=slotProps
span v-if= slot props . data . is true /span
{{slotProps.data.text}}
/模板
/todo-list
！-使用ES2015结构语法-
todo-list :todos=todos
模板插槽范围=“{ data }”
span v-if=data.isTrue/span
{{data.text}}
/模板
/todo-list
/div
脚本
新Vue({
埃尔： #app ，
数据：{
名称：“岔路口”，
todos:[
{text:A ，id:1，isTrue:true}，
{text:B ，id:2，isTrue:true}，
{text:C ，id:3，isTrue:false}，
{text:D ，id:4，isTrue:true}，
],
//slotProps:“”
}
})
/脚本
/body
/html
公共槽和命名槽也写在例程中。这个我就不说了，就说说作用域槽吧。首先从“作用域槽”这个名字说起。最初，父组件的模板是不能在子组件模板中使用的数据。官网里特别强调：父组件模板里的东西都会在父范围内编译；子模板中的所有内容都将在子范围内编译。这句话其实挺难理解的，随便举个例子，
测试槽
一些不好的事情发生了。
！-允许变量，但变量必须在此范围内才能生效，其中name的值将是 fork-
H3 {{name}}/h3
Img= img/flower.jfif alt=图片无法显示
/测试槽
这是我上面的例子，也就是说，这里的名字必须在当前组件中，不能是test-slot组件内部的数据，这是它的作用域限制。数据名属于父组件的作用域，所以只能是父组件的数据。但是slot-scope的出现使得父组件可以调用子组件内部的数据，子组件的数据通过slot-scope属性传递给父组件。
//作用域插槽
Vue.component(todo-list ，{
inheritantrs:false，
道具：{
todos:[数组，对象]
},
模板：
` ul
Li v-for= todo in todos :key= todo . id style= display:block；
//这里：data="todo "表示子组件todo的数据传递给父组件。
slot:data= todo { { todo . text } }/slot//todo . text是默认值，父组件将覆盖它。
/李
/ul
`
});
！-使用作用域插槽，这是通过slot-scope实现的-
todo-list :todos=todos
模板插槽范围=slotProps
span v-if= slot props . data . is true /span
{{slotProps.data.text}}
/模板
/todo-list
这是它的使用方法。slot-scope将接收从子组件传递的名为data、值为todo的数据。需要注意的是，slot-scope接收一个对象，这里命名为slotProps，意思是你传递的数据会作为slotProps的一个属性，所以你需要slotProps.data来调用数据。如前所述，数据的值是todo。todo是什么？Todo由todos遍历，所以它是一个对象。
新Vue({
埃尔： #app ，
数据：{
名称：“岔路口”，
todos:[
{text:A ，id:1，isTrue:true}，
{text:B ，id:2，isTrue:true}，
{text:C ，id:3，isTrue:false}，
{text:D ，id:4，isTrue:true}，
],
//slotProps:“”
}
});
我们已经了解了slot-scope特性，那么他的应用场景是什么呢？我们可以想象一下，别人写了一个组件，组件被打包了，但是他觉得数据的显示风格应该是用户自己定义的，就像我们一样。我们希望列表的样式由用户定义，例如，我添加了一个勾号。初始数据由我们传入，但数据必须由子组件处理。编写组件的人肯定希望显示经过处理的数据。这时候，slot-scope就显得极为重要了。
总结
关于深入理解Vue中slot-scope的这篇文章到此为止。关于理解Vue中slot-scope的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。