33_尚硅谷_Vue_案例_slot

我们来看一下还有一种通信叫lo或叫lo，这个呢，翻译成中文叫插槽啊，这个还挺怪的啊，OK。啊，就是插槽啊，插槽就是一个上位呗，嗯，好，这是一个什么，首先要对它有一个理解啊。来先说一下我们前面的消息啊，主进行通信。这个消息是不是指的就是数据？对吧，而且是纯粹的数据，没有标签嘛，也就是说我们在消息里面那个数据里面带标签吗？不代表对不对，也就是说我传的，比如传一个下标index，传个todo是不是纯粹的数据，而他呢，不一样。他通信的是什么呢？啊，标签。也就是说什么意思，我外面的组件里面的组件，我外面的组件是里面组件什么呢？传标签进去。

能懂吗？不仅是传数据，如果我是传数据，它内部是不是自己得有标签显示？是吧，那我如果直接传到标签呢。那你直接拿着我的传播去的标签数据是不是显示就行啊，这是一种什么样的需求呢？这个地方来啊。举个例子啊，我们看一下有这样一个饿了么，看一下他们。啊，现在呢是PC端，大家只要去呃审查，把它改成移动端，它就会自动切换成移动端的一个外部IP。这就是一个外部应用吗？能看出来吧，嗯，好，这里有一个有一个什么东西呢？有一个头部组件，其实这个我们也会做类似的啊，一个头部组件。这个头部组件在当前这个位置用，譬如说举个例子。在这个里面啊也用。

啊，把它把它去掉啊，在这里也用看到了吗。能看到吧，刚才是不是有一个啊，或者我这样啊，我截几个图吧，截几个图对比一下，大家就能看到更更好一点。比如说我们现在呢，把它截下来，三是同一个组件啊。把它拉过来，就这是一个来复制一下。粘贴放到这里好了，在外面的时候它是这样一种显示。好。来把它放了，甚至还有可能有别的啊，这个地方是一个一个什么样的意思。这是同一个组件写的两个标签啊，写了两个标签，大家看到我们这个。变化，他们俩的变化仅仅是数据不一样吗？还真不是啊，OK，其实是一个什么事呢，就是。

这个地方啊，这是一个图标吧，对吧，当然这也是一个不同的一个图标，对吧，这个都可以去传下面中间是不是有个文本，而这里中间有文吗。没有，诶，这个地方有一个是靠左的文本。能不懂是一个什么事呢？它其实是这样一个设计啊，我在设计组件的时候啊，我会设计几个站位啊，譬如说这个左边啊有一个站位，这个靠左边这面又有个站位，这个中间呢有一个站位，或者说有可能右边也有吧。啊，哎，我先站好位置。这个站位了，你得传东西我才会显示。譬如说啊，这个单位有标号1234。我再去使用这个组件的时候，写成标签的时候，那我会说，诶，我像一。像一这个单位传一个image。

而且肯定会指定SC是吧，啊接着我这个图片是不是写在这里。那我别的没传呢，都不显示。这个不懂啊，OK，当然我这个地方假设我这里面有一个实SPA标签，或者是P标签啊，它本身是个占位，占位本身并不显示任何东西，你给他传一个什么，譬如你给他传个P说明，哎，我是把这个P啊交给二，那就是二的位置显示呗，我如果把它交到一这里，交到三这里，那三这里显示啊。啊，我的这个组件它的变化不仅是数据有变化。啊，而且这个结构啊，这个里面标签也会有变化，那此时用这个slope这种方式去做就比较合适。啊，你传什么我就显示什么，这个传什么是传什么标签，而且肯定要指定位置是吧，你肯定要指定你显示哪个位置。

那也就是说上面是不是传了两个标签结构？对吧，一个是左侧的，一个是什么中间的，而我这里面是不是也传了两个标签结构，一个左侧的最左边的，一个是靠左的是吧，那其他位置写什么。就不显示了。啊，先大概能理解这样一个事情好。那下面呢，我们就来去演示一下该怎么去做。嗯。来我们当前这一个看看我们的。我这样啊，看着我这个。假设啊，我就说我这里面的三个位置，123看到吗？这三个啊，我准备设计三个单位，你传我就有，你不传我就没有，从本质上来说，从这个功能上来说，其实完全没有必要用slo啊，只是说我想用一下lo来看一下，看他能不能用。因为我们现在呢，就一个只用一次，其实用lo就没必要。

啊，本质来说，我们当前这种效果是完全没有必要用lo。在什么时候用呢？就是在这个组件标签被反复用到。啊被很用了很多次，其实我这个是不是只用一次啊，只用一次，但我还还是用一下这个lo看一下来看着啊怎么做的呢，其实也非常简单。好，这里面呢，我就我看一下啊，我我这个地方。那我就直接搞他吧。啊就这个啊，把其他相关了看到这里啊。再一个。这是一个单位啊，张位，我把它做掉。我先把它做掉啊，做掉之后我在这里面写一个什么呢？写一个占位，看一下它的占位是怎么去写的。看一下啊。看一下指标签里面需要写一个标签叫什么呢？Lo就是个插槽，一个单位，而且呢，有一个属性叫什么呢？Name，为什么要有name呢？大家想我说了可能会有什么。

多个站位。站位之间，每个单位之间是不是要有标识名称啊，诶，这个name就是要标识它了。好，来家看着就叫lo啊，给它指定一个name，取个什么名字合适呢？接着说就叫check吧。可以吧啊，这个名字本质上可以随便取啊，但尽量见名字好这个。这个我也准备去设计成一个插槽，诶这个地方我这样啊。这么方程。嗯，好来看到这里我把它注意啊，我在这里呢，也设计一个插头叫。那给它取一个名字，那好，我们叫他什么呢？叫他看吧，数量。

嗯，OK，好这一个。最后这一个我也把它设计成一个插槽。就这一个啊，OK，好，来起个名字叫啊那。等于这一个是一个什么呢，譬如说。嗯，写个什么合适。嗯，啊，就叫delete删除。好，那也就是说现在我是不是有三个插槽，那你说我现在。能显示底部有效果吗？没有任何效果。我插槽是空的吧，啊OK，那你说我现在是不是得想办法给某一个插槽是指定一个标签呢。那看看此时我要去写我的什么呢？AP。这个AP里面就这个呗。是吧，好来啊。

那既然指定这些插头，那我这个地方啊，我先把它留着啊，我自己来写一页啊，出入杠foot这里面写什么呢？大家看啊，附主页，它附这页写什么。腹部组件这一次会有标签体，看到了吧？会有标签体，那在负责写标签的时候写。哎，这个什么意思。也就是说我写了两个div是吧，我这两个div设在哪个位置呢。大家想啊，这个地方是不是有一个对应的关系，也就是说这一个div是不是插在上面。下面这个D是不是它在这个下面。能不能看懂啊，OK，就这样的一个意思，那好了，那现在我。应该怎么做呢？啊，大家看我现在是不是可以插个他过去。

当然你也可以不做啊，看我们先搞一个试试，但是搞了以后我怎么标明这个音铺的是交给第一个插槽了。啊，我的这个里面需要去指定一个属性叫什么，等于切。是这意思，那这样的话，我的这一个你看。看到吧，不就过来了吗？这个能不懂能懂。好，但是有一个需要注意的地方，什么要注意的地方呢？啊，我的这个是不是需要有一个计算属性来着。这个时候啊，这个插槽所对应的这些标签结构是在副组件里面编译的，是在副组里面运行好了以后再插到那个子组件里面去，什么意思呢？就这些相关的代码。你这个这个不对应一个计算属性吗。

这些代码都应该干嘛呢？写在副组件里面。能不懂你所有相关的代码其实就包含了这个了，当然这个到时候我们也会用啊是吧，OK。就这一个。要放在我们的计算属性看一下，我们有计算属性吗？没有啊，OK，计算属性呢，最好放在date下面。Computing。好，那大家看着啊，我们现在除了这个这个input是不是还有别的可以穿。是吧，我可以把这个是不传过去。但是得指明。指明你到底显示在哪个插头里面有一个什么漏的，等于好像叫叫叫什么。看着吧，看一下。

查查是吧，帮我把这一个是不是类似的。但主要是现在我们没什么太大变化啊，就是跟前面一样的来。我们这里面主要只用只用一遍啊，只用一次，所以这里面都一样，来个lo，等于好像叫delete吧，是吧，好这个地方啊，这个地方看看我们这一边，这边插好以后我。这个还需要吗？我这没有。是不是在附主页里面定义好了。我完全没有必要了啊，OK，好，包括这个时候啊，这个时候我还需要传什么这些东西过来吗。都不需要了，我就是定义了三个插槽，看到吗？接收标签是不是别的都没有，所以我这个也可以是吧。没了，就是因为空的。对吧，那空的以后来看一下我们这边啊，我们有没有我们所需要的把这个上面这个给干掉，干掉以后呢，我们这个一知物切是不是定义在计算属性里了，呃，还有我们的这个总数量就是完成的数量。

是不是在这一个计算书里也有，好，接着我们有没有todo。有没有有啊，这不就是吗。是吧，好啊，接着我们有一个有一个看到这里面它有没有。就他妈有吗？好，这个方法我们有没有。有没有有啊，就从这边传过去的呀。看到了吧，就从我这边传过去的，那也就是说一切是不是都准备好了啊OK。那也就是说把所有相关的一些东西是不是都定义在副组件了，定义在副均了，来我们来看一下。

来看看我们行不行，各位是不是可以啊，啊也是可以的啊，其实从本质上说，咱这个效果啊，完全没有必要用的。因为我们这个组件呢，只用一次。你至少用两次或者三次，你才会涉及到传不同的东西嘛。啊，这里面主要是跟大家演示一下这个lo的使用，因为后面我们项目里面用。主要关注点这个的和别的主界线通信，这个通信的是什么，记住一点就行，标签。而其他的空气是什么？数据。对吧，就这回事，是通信的，是标签还是数据的问题？别的啊，具体的可以看语法。好，那这个地方最后其实还有一个组件间通信的方式啊，不过呢，现在我们不讲。

叫VX。咱们用过吗？啊，忘了是吧，没关系啊X很好学，很容易学。好，那关于组件通信呢，我们大致就先讲到这里啊。我把那个代码。