Vue.js进阶系列(11)--作用域插槽

  作用域插槽呢，是插槽的另外一种用法。物竞天择适者生存呐，为了不被信息时代抛弃，插槽只能凭借一己之力扮演多重身份，在下佩服佩服，不过我们还是言归正传。在了解作用域插槽之前呢，先要了解什么是作用域。

一、作用域

  说白了，作用域就是变量的使用范围，那么本例的问题是该如果给变量找范围。一言不合就上代码，这是小编的风格⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

  还是老样子，Vue作为父组件，声明cnp子组件是局部变量，并且在Vue和cnp中都有变量isShow，只是取值不一样，在Vue中是false，在cnp中是true。
  小编希望通过是否显示子组件cnp的内容来判断变量isShow的作用域。如果子组件cnp没有显示内容，说明使用的是Vue中的isShow，反之就是使用了子组件中的isShow。
  大是显示内容，小是不显示内容，各位客官，买定离手了喂，买定离手了喂。

image.png

好了，小编不该聚众赌博 ￣□￣｜｜ 让我们谈回正经事儿

image.png

  结果发现是不显示的，说明isShow用的是Vue中的数据。如果将Vue中的isShow修改为true，结果是显示的。这就涉及到了变量的作用域问题
  官方给出的准则是这样的：父组件模板中的所有东西会在父级作用域内编译，子组件模板中的所有东西会在子级作用域内编译。比如上面的案例是在父组件的div模板中使用的，所以浏览器会到父组件中的data对变量isShow进行编译。
  在懂了作用域的概念后，作用域的插槽就好办多了 o(￣︶￣)o

二、作用域插槽

  作用域插槽呢，就是在父组件中替换插槽的标签，但是内容是由子组件提供的。这说的是啥？？？？？

image.png

没关系，先让我们来看一下下面的例子：

image.png

  这个例子中，我们通过在子组件中使用v-for指令使pLanguage的数据以列表的形式展示出来。
  现在的需求是，我们希望在第二个子组件中，数据是“ JavaScript - Java - C++ - C# ” 这种形式展示的。这跟作用域插槽的作用是不是很像：在父组件中替换插槽的标签，但是内容是由子组件提供的。替换标签就相当于展示的形式不一样了嘛，内容依旧是子组件中的pLanguage提供。
  目标已经十分的明确，首先是要获取子组件中的pLanguage数据，然后在父组件中修改自己想要的样式，小编觉得直接在子组件使用插槽，然后在父组件中修改样式就可以实现，于是乎写下了这样的代码：

        

    
    
        {{item}} - 
    

        
        

本以为离成功还差一步的时候，深刻体会到了一句话：现实是残酷的！

image.png

  意思是说，pLanguage是子组件的数据，父组件是不能够直接访问子组件的数据的。但硬是要获取子组件的数据，怎么办呢？
  这个时候就到了 作用域插槽 出场了使用作用域大概分成以下来两个步骤：
第一步：为slot设置属性，将子组件中的数据复制给属性
第二部：使用slot-scope 获取slot对象，通过slot.属性名来获取子组中的数据
比如：

    

    
        

            {{item}} - 
        
    
  

image.png

  首先，显示的数据用插槽来表示，这样子当cnp没有书写别的格式时就可以直接使用slot中的格式
  其次，为slot声明了属性data【当然，属性名是可以人任意的】，并且将pLanguage赋值给属性data，这就意味着data中的数据和pLanguage是一样的
  然后，在父组件中使用slot-scope="slot" 获取到了slot对象，并且在slot对象中有个叫data的属性，这样就相当于父组件获取到了子组件pLanguage中的数据
  最后，通过solt.data获取里面具体的元素，并且显示出来
  这就是使用作用域插槽的过程，这个时候你就会很好理解在父组件中替换插槽的标签，但是内容是由子组件提供的这句话的含义

image.png

  我知道，这里众多的读者中肯定有跟小编一样的强迫症患者，想把那个尾巴去掉

image.png

其实很简单，用join函数就好

{{slot.data.join(' - ')}}

image.png

  小尾巴已经成功的去掉啦O(∩_∩)O哈哈~

  ❤今天的作用域插槽分享会到此结束啦，谢谢大家的聆听，我们下期见❤

❤❤记得点点赞唷(＾Ｕ＾)ノ~ＹＯ❤❤