这篇文章主要介绍了Vue中的slot如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的slot如何使用文章都会有所收获，下面我们一起来看看吧。在Vue中，我们使用组件来组织页面和组织代码，类似于搭积木，每一个组件都是一个积木，使用一些相同或者不同组件就能搭建出我们想要的页面。slot（插槽）是组件功能的重要组成部分，插槽必须用于组件才有意义。它为组件提供了对外的接口，允许从组件外部传递内容，并将这部分内容放置到指定的位置。当一个组件可能被使用至少两次并且两次使用内容（这里指组件视图的组成）不同时，插槽才有存在的必要。注意： 本文的代码都是基于Vue3编写。Link.vueApp.vue视觉效果：以上实现了两个组件Link.vue和App.vue，Link.vue是一个链接组件，在组件内部已经定义好了样式，然后链接的内容交由外界使用时填充。在App.vue组件内则使用了Link.vue组件两次，并且两次传入的内容不同。上面的Link.vue只要求填充一份内容，那么当我们需要在组件的好几个位置都填充不同的内容应该怎么办？这时候可以使用具名插槽，就是给组件的每个填充区域都取个名字，这样在使用的时候就可以往对应名字的那个区域填充内容。Page.vueApp.vue效果图：为啥叫作用域插槽？首先要搞清楚作用域这个概念。在JS中,作用域表示的是当前的执行上下文，只有在当前作用域中变量才可以被使用。作用域有层次之分，分为父作用域和子作用域，子作用域可以访问父作用域中的变量，这一层层的往上则形成了作用域链。JS中只有全局作用域和函数作用域，ES6新增了块级作用域。关于作用域，这里不再赘言，有需要的同学可以去MDN作用域查看。Vue本质上还是js，模板最终会被编译成render函数，每个组件都有一个render函数。下免费云主机域名面先看个例子：Count.vue当前数字：{{count}}App.vue这就是填充Count组件的插槽appCount:{{appCount}}Count组件中的count变量：{{count}}效果图：从上面的效果图中可以看到，在App.vue组件中使用Count.vue组件时,在Count.vue组件的插槽中，能够访问appCount变量，但是不能访问Count.vue组件的Count变量，这是为什么呢？理论上，插槽传入的内容最终会插入到Count.vue组件中，那么也应该可以访问Count.vue组件的变量才对啊？父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。上面的一段引用摘自Vue文档，这段文字表明了，在App.vue中的一切，包括Count.vue组件的插槽内容都是在App.vue组件下编译的，也就是Count.vue组件的插槽模板可以访问App.vue组件的所有变量，但不能访问Count.vue的任意变量。如果我一定要在插槽中访问Count.vue的count变量呢？这个时候作用域插槽就派上用场了。作用域插槽允许在组件中对插槽所在的上下文暴露某一些变量，改写以上的Count.vue组件，Count.vue当前数字：{{count}}App.vue这就是填充Count组件的插槽appCount:{{appCount}}Count组件中的count变量：{{slotProps.count}}这就是作用域插槽，本质上了是允许在父组件作用域访问到子组件作用域，它为插槽模板区域提供了一个数据来源于子组件的上下文。作用域插槽的用处还是挺广的，总的来说当你需要它时自然会用到它，如果想提前学习，可以看一下elementUI的table组件。上面就插槽的使用说了一大堆，关于插槽的实现还是没有涉及，下文讲解在Vue中插槽是如何实现的？首先，我们都知道，无论是使用jsx还是模板,最终都会编译成render函数，并且render函数在执行之后会输出 Virtual Dom ,下面先看一个组件在编译完成之后是什么样子？Comp.vuecount:{{count}}App.vue
{{magRef}}：{{slotProps.count}}
Comp.vue编译之后：App.vue编译之后：这个编译是在加载.vue文件的时候就执行了，runtime阶段是不存在模板字符串了（使用UMD的时候会存在），在浏览器中执行的都是编译之后的js。下面具体分析一下以上Comp.vue和App.vue编译之后的js代码。首先在Comp.vue中，
{{magRef}}：{{slotProps.count}}
被编译成了：请忽略_withCtx,显然模板会编译成一个函数，并传递到子组件，进而在子组件中构建出完整的virtual dom， 上面中_ctx是当前组件的上下文，slotProps则是作用域插槽暴露的参数。由此可以做一个总结，vue slot的实现原理：所有的模板会被编译成创建vnode的函数。父组件中传递给子组件的插槽（每个插槽都是一个函数，即名字不同的插槽为不同的函数）内容模板也会被编译成函数并且传递给子组件，模板中如果使用了父组件的变量，那么会通过闭包的形式在插槽函数中被使用。子组件在接收到父组件传递的插槽内容函数，会以在slot暴露的变量（只有作用域插槽有这些变量）为参数执行这个函数，返回vnode，这个vnode会作为子组件vnode的一部分。关于“Vue中的slot如何使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中的slot如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。
这篇文章主要介绍了Android中怎么利用zxing生成二维码的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Android中怎么利用zxing生成二维码文章都会有所收获，下面我们一起来看看吧。二维码官方叫版本Version。Ver…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
