关于VUE的编译作用域及slot作用域插槽问题
什么是插槽？插槽的指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。
插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。
简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；
作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。
下面给大家介绍VUE的编译作用域及slot作用域插槽问题，一起看看吧！
其实就是 如果有很多个组件 ，当你在组件 使用变量的时候 ，那么你变量的作用域其实就也是在他定义的代码中找，如果没找到，那么就报错，【这个很基础的 是人都看出的】
官方说：父组件模板的所有东西都会在父级作用域内编译；子 组件模板的所有东西都会在子级作用域内编译。
下面例子完美说明了：
作用域插槽是slot一个比较难理解的点这里需要细心理解：
我现在说下软件需求目标：
子组件中有一组数据：比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']，我要他在子组件的插槽中 ，有的用列表显示，有的用 - 链接、有的用 * 链接。
先看源代码（未使用插槽，写死的，在这个代码中改写 使用插槽作用域）：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 未使用插槽 下面模板是写死的 -->
<template id="cpn">
<div>
<ul>
<li v-for=" item in pLanguages">{{item}}</li>
</ul>
</div>
</template>
<div id="app">
<cpn></cpn>
</div>
<script>
const app = new Vue({
el: "#app",
components: {
'cpn': {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</script>
</body>
</html>
那么如果用插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 使用 了 插槽 且 下面设置了 插槽slot 默认值 -->
<template id="cpn">
<div>
<slot> <!-- 已改动 -->
<ul>
<li v-for=" item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<div id="app">
<cpn></cpn> <!-- 使用默认值 列表的形式 -->
<cpn> <!-- 已改动 -->
<!-- 问题就在这里 我想要以 - 链接的方式展现cpn组件中data中的数据，我无法获取，
因为作用域，这里的作用域是Vue实例app的！ 只能获取到Vue实例app的data！
所以 下面这句代码是错的！！！ 所以怎么解决插槽代码获取子组件中的data呢？
-->
<span v-for="item in pLanguages">{{item + "-"}}</span>
</cpn>
</div>
<script>
const app = new Vue({
el: "#app",
components: {
'cpn': {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</script>
</body>
</html>
代码已经在里面很详细的说明了，问题也标注出来了，简而言之：
因为不在子组件的作用域，怎么解决插槽代码获取子组件中的data呢？
解决方案： 利用slot作用域插槽
到此这篇关于VUE 的 编译作用域 以及 slot作用域插槽的文章就介绍到这了,更多相关vue作用域插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue作用域插槽slot-scope实例代码
vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot
-
详解Vue 匿名、具名和作用域插槽的使用方法
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.
-
浅析vue插槽和作用域插槽的理解
插槽: 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实.以及怎样显示由父组件来决定. 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制.但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块.这样就使组件可复用性更高,更加灵活.我们可以随时通过父组件给子组件加一些需要的东西. 这个可以参考https://www.jb51.net/article/160047.htm.这位
-
详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component> 这里的message就是一个slot,但是它绑定的是父组件的数据,而不是组件< child-component >的数据. 父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译. <div id="app"> <child-co
-
如何理解Vue的作用域插槽的实现原理
本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记 举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作).而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
关于VUE的编译作用域及slot作用域插槽问题
什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分发内容的出口. 插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽. 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定: 作用域插槽的样式由父组件决定,内容却由子组件控制.简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽. 下面给大家介绍V
-
vue中slot（插槽）的介绍与使用
什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot 原理 在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom. <slot> 元素 Shado
-
vue模版编译详情
目录 1.parse 解析器 1.1 截取的规则 1.2 截取过程部分 1.3 解析器总结 2.optimize 优化器 2.1 静态节点 2.2 静态根节点 2.3 优化器总结 3.generate 代码生成器 3.1 JS的with语法 思考: html是标签语言,只有JS才能实现判断.循环,而模版有指令.插值.JS表达式,能够实现判断.循环等,故模板不是html,因此模板一定是转换为某种JS代码,这种编译又是如何进行的? 解析: 模版编译是将template编译成render函数的过程
-
Vue中的slot使用插槽分发内容的方法
本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?
-
一篇文章搞懂：词法作用域、动态作用域、回调函数及闭包
前言 把以前一直只限于知道,却不清晰理解的这几个概念完完整整地梳理了一番.内容参考自wiki页面,然后加上自己一些理解. 词法作用域和动态作用域 不管什么语言,我们总要学习作用域(或生命周期)的概念,比如常见的称呼:全局变量.包变量.模块变量.本地变量.局部变量等等.不管如何称呼这些作用域的范围,实现它们的目的都一样: (1)为了避免名称冲突; (2)为了限定变量的生命周期(本文以变量名说事,其它的名称在规则上是一样的). 但是不同语言的作用域规则不一样,虽然学个简单的基础就足够应用,因为我们有
-
深入理解javascript作用域第二篇之词法作用域和动态作用域
前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇--词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成词法单元.这个概念是理解词法作用域
-
JavaScript静态作用域和动态作用域实例详解
静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量). 动态作用域–函数的作用域是在函数调用的时候才决定的 JavaScript采用的是词法作用域即静态作用域: // 静态作用域: var a = 10; function fn() { var b = 1; console.log(a + b); } fn(); // 11 在创建fn函数时的时候就已经确定了它可以作用哪些变量,如果函数fn里面有变量a就直接操作变量a,
-
vue中的 $slot 获取插槽的节点实例
vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo
-
Vue如何跨组件传递Slot的实现
在开发过程中遇到这样一个问题,如何跨组件传递插槽.因为在开发类似树组件的过程中,插槽需要通过外部传递到树的根节点,然后通过根节点依次传递到各个叶子节点.那么如何把根节点的Slot如传递给子组件呢? 我们在开发过程中,希望可以这样实现重新定义叶子节点的结构: <data-tree> <template v-slot:node="data"> <div>{{data.title}} - {{data.text}}</div> </tem