Vue组件化开发（三）——slot插槽的使用

~

相信有过项目开发经验的小伙伴一定知道，在项目中往往会有多个地方需要用到样式相似，细节略有差异的组件，比如说导航栏和搜索栏，这些组件出现频率比较高，但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦，而且复用性也很低。
可能有些读者会觉得，这不难解决，对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决，比如导航栏中的标题，我们可以都交由父组件传值来实现。（比如下面的导航栏1和导航栏2）
不错，当组件的变化程度不大时，这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景，导航栏中部的位置可能是标题，也有可能是下拉框，是搜索框或者是其他自定义的组件呢？此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。（比如下面的导航栏1和导航栏3）

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例：
我们一共在Vue实例中使用了2次子组件，第一次父组件没有往子组件中传递元素，第二次父组件有往子组件传递元素。

从结果上看，当父组件没有往子组件插槽中添加元素时，则会展示插槽中默认的内容，而如果父组件有传递插槽内容，则会覆盖插槽的默认内容，而后进行显示。

在第二小节中，我们已经知道了插槽的基本使用，但是当子组件的功能比较复杂时，我们可能就要在组件中定义多个插槽，来满足更加灵活的业务需要。比如上面举例的京东导航栏，这个组件内部可以拆分为三个插槽，分别对应 左 、 右 、 中 三个位置的内容。
但想要在组件内预留多个插槽有个前提条件，就是我们必须要让每个插槽都有其对应的唯一标识，这样父组件传递内容的时候，才能识别出来哪些内容对应哪个插槽。

我们可以看一下下面这个案例：
子组件内定义了三个具名插槽，我们在父组件中进行子组件的调用，需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现， 无论父组件传递的插槽内容顺序如何，最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的 。

在讲解作用域插槽之前，我们需要先对 编译作用域 进行理解。具体表现在 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
我们可以通过下面这个案例来理解这个规则：
父组件和子组件都使用了 isShow 来控制组件的显示，同时在父子组件的data中，又都有同名的变量 isShow 。我们从结果中可以看到，定义在在父组件中子组件，其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识，则受子组件自身data变量的约束，也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中，我们已经可以了解到编译作用域的概念，也知道了父组件无法直接使用子组件内部的数据（因为子组件模板内部的数据是在子组件的作用域中的）。但 有些场景下，我们又会需要父组件可以替换插槽的标签，但是内容由子组件来提供。 那么，此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例：子组件中存在一个数组，现在我们想要通过插槽的方式，来根据不同的需要实现数组的展示方式：
在父组件中，我们定义了2种展示数据的方式，一种为展示为列表形式，还有一种是每种语言以 -- 进行分割。在使用上，子组件需要在插槽处通过 :data 的方式提供对外暴露的数据，父组件在使用的时候，则是先在子组件内部定义 <template> 标签，从 slot-scope 属性中取出slotProps参数（其实slotProps就是一个对象，里面封装着所有子组件插槽对外暴露的数据）。
我们通过 slotProps.data 就可以获取到我们在子组件插槽中封装的data数据啦

至此，有关插槽的内容就到此结束啦，作用域插槽多见于常见的组件库中（比较多是在table组件中出现），所以最好要熟悉插槽的原理和使用，这样可以更好地简化我们的开发工作

---

新和县13468798333： vue.js 侦听DOM结构改变,要不要自己写一个自定义指令 - ？
朱怪十味： 其实vue的思想是组件式开发的思维方式,不要去想着修改dom,监听dom;而是换个角度,从监听数据的方式去间接性的达到监听dom的目的,组件的开发是数据驱动dom的,这是必须要理解到位的.还有带slot的组件,不应该再去干预slot里面的内容了;而是在关系到slot内容的父组件去设定指令.

新和县13468798333： 如何利用vue组件 动态生成router - link - ？
朱怪十味： 首先,Vue.component的第二个参数是一个配置对象,你这个写法连JS语法都不符合.其次,template配置应该是一个HTML代码的字符串,所以改成:Vue.component('sidebar', { template: ''Go to FooGo to Bar }); Update (参考资料:...

新和县13468798333： Vue如何获取自定义组件标签之间的值(innerHTML) - ？
朱怪十味： vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 vue2.*版本中 在标签上加上ref=dom',然后在代码中this.$refs.dom.$el这样就拿到了页面元素

新和县13468798333： vue组件化开发怎么引入外部js文件 - ？
朱怪十味： 这里的组件化开发是使用什么?? vue-loader么...如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js') 如果只是单页面html,可以直接引入就行了<script src=＂xxxx.js＂>

新和县13468798333： vue中自定义指令是通过什么属性实现 - ？
朱怪十味： bind - 只调用一次,在指令第一次绑定到元素上时候调用 update - 在bind之后立即以初始值为参数第一次调用,之后绑定值变化的时候,参数为新值与旧值 unbind - 只调用一次,在指令从元素上解绑的时候调用

新和县13468798333： 在vue中实现orgchat 组织结构图 - ？
朱怪十味： 用Microsoft Office Visio这个软件吧,专门用来画各类图表的,里面有各种各样的模板.很方便.网上下载一个安装好就可以了.比你用Word或者PowerPoint强.

新和县13468798333： vuejs的组件化开发中,要怎么自定义class,覆盖原有的css样式 - ？
朱怪十味： <el-table-column>并不是一个dom节点,所以infotext这个类究竟用在哪,需要看下el-table-column这个组件的实现才知道.用了第三方组件的必然都会遇到你这样的问题,我说下我的解决方法,不一定是好的.一个vue文件可以写多个<style></...

新和县13468798333： vue.js中,在一个vue组件中,想通过点击按钮,才加载另外一个目标vue组件,要怎么实现? - ？
朱怪十味： <button @click='onclick'></button> <div> <mycomponent v-if='showcom'></mycomponent> </div> { data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } }Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式...

新和县13468798333： 怎样利用Vue动态生成form表单 - ？
朱怪十味： $formCreate 参数 rules 表单生成规则 [inputRule,selectRule,...] options 初始化配置参数 (详细见底部 createOptions)$formCreate.maker 组件规则生成器 除hidden外,其他配置方式全部相同.详细参考表单元素规则 props,event,slot传入参数为对...

新和县13468798333： 什么是组件化开发 - ？
朱怪十味： 组件化编程的关键目的是为了将程序模块化,使各个模块之间可以单独开发,单独测试.当然,随之而来的版本问题也必须要解决,防止出现不兼容的组件版本破坏程序的稳定性.