微网站与app的区别,有没有好网站推荐,成都微信开发小程序,广州申请公司注册网站插槽为组件提供了强大的扩展能力。我们可以把电脑的主板理解为一个已经封装好的组件#xff0c;主板上都会预留各种插槽#xff0c;我们可以往插槽中插入内存条、显卡、声卡等设备。基于同样的思想#xff0c;Vue在封装组件时#xff0c;也可以预留插槽#xff0c;在组件被… 插槽为组件提供了强大的扩展能力。我们可以把电脑的主板理解为一个已经封装好的组件主板上都会预留各种插槽我们可以往插槽中插入内存条、显卡、声卡等设备。基于同样的思想Vue在封装组件时也可以预留插槽在组件被使用的时候我们就可以往组件插槽中插上其他内容。 Vue中的插槽用 slot 标签进行占位。这一块我们会讲两部分内容插槽和作用域插槽。 插槽可理解为父模板中向子组件内部传递内容。作用域插槽则是父模板中获取子组件中的数据组装好内容之后再传递给子组件。下面我们分别详细介绍。一、插槽前面说了插槽是使用 slot 标签在组件中放置占位符。我们定义一个带插槽的组件。Vue.component(alert-box, { template: Error! })组件模板 template 中的 就是我们为 alert-box 组件预留的插槽。alert-box 组件在使用的时候我们就能往插槽中传递内容。比如我们传递一段文本 Something bad happened.就会被渲染如下如果我们传递一个按钮 紧急事件按钮就会被渲染出来我们也可以传入一堆HTML内容这些HTML内容都会渲染到 slot 所在的位置。 紧急通知 请同学们赶紧撤离 校长办公室渲染如下通过上面这个例子应该大致明白了插槽的作用。 为了方便使用Vue提供了给插槽设置默认内容的功能。如果外部不传入内容则展示默认内容。如果外部传入内容则展示传入的内容。Vue.component(alert-box, { template: Error! Something bad happened. })默认内容是放在 中间上面我们就是在 中间放置了一段文本 Something bad happened. 。在使用的时候如果不传入内容默认就显示这段文本。紧急撤离就会被渲染成 上面我们没有给插槽指定名字实际上Vue会给没有起名字的插槽自动加上一个 default 的名字等同于 我们也可以为插槽指定其它名字以方便外部在传入内容的时候可以指定将内容传递给哪个插槽。这样就更接近电脑主板的思想了主板上的插槽是分内存条插槽、显卡插槽、声卡插槽 等等每一个插槽都是有名字的。 我们的组件插槽也可以这样比如下面代码中我们就指定了头部插槽、尾部插槽。Vue.component(base-layout, { template: }) 这时候在使用的时候就需要指定内容究竟是传递给哪个插槽未指定的都会传递给匿名插槽也就是 default 插槽。 Here might be a page title A paragraph for the main content. And another one. Heres some contact info 如果组件内有多个匿名插槽那就会传递多份。如果组件内没有匿名插槽未指定插槽名的内容就会被丢弃。 不过slot 属性在Vue 2.6.0版本中已经不推荐使用官方推荐用 v-slot 指令来替代 slot 。v-slot 指令更强大它不仅可以在这里替代 slot 还可以替代作用域插槽中的 slot-scope。 我们使用 v-slot 指令改造一下上面的用法。我们通过在一个 元素上使用 v-slot 指令并以 v-slot 的参数的形式提供其名称来向具名插槽传递内容。 Here might be a page title A paragraph for the main content. And another one. Heres some contact info 这两种使用的效果是一样的。不过我们推荐使用新语法 v-slot 指令。二、作用域插槽 在学习作用域插槽之前我们先要明白作用域插槽到底解决了什么问题。 很多时候我们会有这样的需求需要把子组件中的数据通过父级模板的控制从而在子组件中渲染出不同的样子。这句话不太好理解举个具体的例子。 子组件的数据中有一数组 letters [A, B, C, D, E]我们在某处需要把这个数组渲染成A - B - C - D - E而在另一处又需要渲染成列表ABCDE 这时候就可以通过作用域插槽来实现。作用域插槽就是数据由子组件提供排版由父组件控制。 在介绍作用域插槽之前先要介绍一下编译作用域。因为正是编译作用域的存在才使得作用域插槽有存在的必要。2.1 编译作用域 编译作用域简单的说就是父子组件都只能取到自己实例中的数据。官方也给出了描述父级模板里的所有内容都是在父级作用域中编译的子模板里的所有内容都是在子作用域中编译的。 我们通过一个具体的例子来说明其含义{{msg}} let vm new Vue({ el: #app, components: { com: { template: data() { return { msg: 子组件 } } } }, data: { msg: 父组件 } }) 父子组件中在各自的 data 中都定义了msg并且他们值不一样。那子组件在使用的时候{{msg}}插值表达式 {{msg}} 到底取到的是谁的数据很方便可以验证出 {{msg}} 取到的是父组件的数据。其实在父级模板中是无法直接取到子组件中的数据。这正是因为有编译作用域的存在。同理在子组件中也不能直接使用父组件中的数据。当然父子组件中的数据并不是绝对隔离我们可以通过传值的方式让他们数据进行交互。作用域插槽就是要解决在父级模板中取到子组件中数据的问题。2.2 作用域插槽 现在目标已经明确我们就是要在父级模板中取到子组件中的数据所以这里势必要进行数据传递。 先考虑子组件的数据传出我们可以给 slot 标签设置一个自定义属性 data然后将数据绑定到自定义属性 data 上即可将数据传出。然后在父级模板中接收数据。Vue是通过在 上使用特殊的 slot-scope属性接收子组件设置在插槽 slot 上的全部自定义属性。scope 变量就会接收到设置在 slot 上的全部自定义属性然后我们通过点属性名的方式就可以取到绑定在属性上面的值。 {{scope.data}} 现在我们来实现前面说的字符数组的渲染。在Vue实例中创建子组件com如下 let vm new Vue({ el: #app, components: { com: { template: , data() { return { letters: [A, B, C, D, E] } } } }, })可以把它渲染成列表 {{item}} 也可以渲染成短横线连接的形式 {{scope.data.join( - )}} 我们就可以看到相同的数据展示成不同的形式。 现在我们再完善一下作用域插槽的定义子组件向父组件传递数据但父组件通过传递插槽内容来控制数据在子组件中展现方式。 前面说了slot-scope在 Vue 2.6.0中不再推荐使用应该使用 v-slot 指令来替代上面渲染的代码就可以改造如下 {{item}} {{scope.data.join( - )}} 总结 本章我们主要介绍了插槽和作用域插槽。插槽部分讲了插槽的使用、插槽默认值、具名插槽。作用域插槽部分主要讲了编译作用域和作用域插槽的使用。 这一块内容是Vue中的高级部分运用恰当威力极大。
