vue作用域插槽slot-scope详解,
本文主要介绍VUE的编译范围和插槽问题。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
什么是插槽？slot的指令是v-slot，目前替代slot和slot-scope，slot内容，以及一套用于vue实例内容分发的api，以slot元素作为承载分发内容的出口。
插槽分为单个插槽、命名插槽和作用域插槽。前两个比较简单，这里就不赘述了。今天的重点是作用域插槽。
简单来说，前两个槽的内容和样式是由父组件决定的，也就是说，什么内容，怎么显示是由父组件决定的；
作用域槽的样式由父组件决定，但是内容由子组件控制。简单来说：前两个槽不能绑定数据，作用域槽是绑定数据的槽。
让我们来介绍一下VUE的编译范围和插槽。让我们来看看！
实际上，如果有许多组件，当你在组件中使用变量时，你的变量的范围实际上也在它们定义的代码中找到。如果您找不到它们，您将报告一个错误。【这是很基本的，大家都能看出来】
正式来说，父组件模板中的所有内容都将在父范围内编译；子模板中的所有内容都将在子范围内编译。
下面的例子完美地说明了：
作用域槽是槽中理解的难点。这里需要仔细理解：
现在让我谈谈软件需求的目标：
子组件中有一组数据：例如：plan languages:[ JavaScript ， Python ， Swift ， Go ， C]。我希望它在子组件的插槽中。有些以列表形式显示，有些用-链接，有些用*链接。
先看源代码(未使用的slot，写死了，在这段代码中重写使用slot作用域):
源代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
购物车/标题
script src=js/vue.js/script
/头
身体
！-未使用槽下的模板写死了-
模板id=cpn
差异
保险商实验所
Li v-for= item in plan languages { { item } }/Li
/ul
/div
/模板
div id=应用程序
cpn/cpn
/div
脚本
const app=new Vue({
埃尔： #app ，
组件：{
cpn :
模板：“#cpn”，
data() {
返回{
计划语言：[JavaScript ， Python ， Swift ， Go ， C ]
}
}
}
}
})
/脚本
/body
/html
所以如果你用老虎机：
！声明文档类型
html lang=en
头
meta charset=UTF-8
购物车/标题
script src=js/vue.js/script
/头
身体
！-使用slot，slot slot的默认值设置如下-
模板id=cpn
差异
槽！-已经被改变了-
保险商实验所
Li v-for= item in plan languages { { item } }/Li
/ul
/插槽
/div
/模板
div id=应用程序
cpn/cpn！-以默认值列表的形式-
cpn！-已经被改变了-
！-这就是问题所在。我想用a-link的方式显示cpn组件的数据中的数据。我拿不到。
因为范围，这里的范围属于Vue实例app！只能获取Vue实例app的数据！
所以下面的代码是错的！那么如何解决槽码子组件中数据的获取问题呢？
-
span v-for= item in plan languages { { item - } }/span
/cpn
/div
脚本
const app=new Vue({
埃尔： #app ，
组件：{
cpn :
模板：“#cpn”，
data() {
返回{
计划语言：[JavaScript ， Python ， Swift ， Go ， C ]
}
}
}
}
})
/脚本
/body
/html
代码解释得很详细，问题也标出来了。简而言之：
因为不在子组件的范围内，如何解决槽码获取子组件中数据的问题？
解决方案：使用插槽作用域插槽。
关于vue的编译作用域和slot作用域slot的这篇文章到此为止。想了解更多关于VUE scope slot的信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。