从插件组件说到vue的slot上监听
最开始写网页的时候我很崩溃，为什么写的代码很快就不能看了，一坨一坨的，对自己写的东西觉得非常没有安全感，以至于很长一段时间里我都在做重复而难以维护的事情。我感觉前端开发有两件事儿是特别需要重视的，一个就是可维护性，一个就是复用性。
可维护性有很多因素，我觉得最重要的就是模块化，遥想现在的老系统的代码都是要么js一坨，要么script标签引入一坨而且顺序还得小心翼翼，真是太惨了。。。
而可复用性就是今天要记录的一些东西，虽然说的是vue里具体的解决方案。可是很多东西都是相通的。
比如最开始的时候：
第一天，我有一个table页面，好的，我html一画，js数据一拿，事件一监听完工；
第二天，我又有一个这样的table页面，差不多，好的，我把昨天写的copy过来，改改，完工;
第三天，我又有一个这样的table页面，也差不多，好的个鬼。。。。我要疯了，难道我还要copy吗？好吧，忍了。。。copy去
第四天，好了我没有同样的页面，总算松了一口气，可是需求让我把每个table都加上排序功能，好的，啊。。不对，我要加在哪里。。。第四天我总于崩溃了。。。
后来，我发现了有jq插件这种好东西，尼玛啊我怎么这么傻，用用用起来，最开始觉得还挺好用呢？那为什么好用呢？研究一下吧，发现就是一个道理，把常用的东西封装起来！就如同我想用锤子，不再是每次拿个铁，然后段成平的，然后按上把手，用完扔掉，而是直接买一把万能的锤子不就得了。扯远了，jq插件它大致的思路是什么呢？
html写个模板 =》js里读取模板 =》处理配置参数 =》处理事件监听 =》渲染到页面里 =》暴露参数和方法给用户使用
这下好了，我每次写table的时候不再copy了，html里把模板一写，js钩子一挂；js里传好参数和添加需要的回调，最后初始化运行；完事儿，好的，这样开发好像比之前爽歪歪了。
又n天过去了。。。每天写table啊，真是table跟我有愁啊，每次页面都要先去写html，然后再切换到js啊。然后和其他插件混合在一起，有些插件要删除？好吧，仔细的寻找html和js，才能小心的把两处都删除掉。。。感受到了么，我是不是应该把html模板和js搞在一起啊，可是大家不都说逻辑和样式分离么，哎。。。管他呢，我觉得html不算样式啊，css才是哇，html和js写一起多好维护啊，好吧。。然后就开始了在js里拼接字符串。。。
好的，这下引入也好办了，html只用写个钩子就行了，嗯嗯。。感觉好一些了。。。可是js里每次都要写初始化语句啊，真是。。好吧，那就在钩子上做手脚，加data-*来特殊标识插件，然后js插件里自动初始化，好的。。反正又少了一句。。
可是插件慢慢多了起来，这种方式好像也有问题了，比如：
- 命名冲突
- js里拼字符串很酸爽啊
- 各个插件代码调用风格差异挺大，很别扭有木有
- 页面js钩子太多，看一眼页面不知道用了什么有木有
- 不同插件想套嵌，什么？没错想套嵌。。。
- 。。。
郁闷之时，这时候听说了组件化，什么什么啊？好的试试vue吧。。。矣，上面的问题好像都解决的不错啊，哎。。不要为了学框架而学啊，能解决问题就是好技术是不？
其实是想记录这么一种情况的，可是竟然扯了这么多。。。。
就是我有一个组件，我想其中一些内容是定制的而不是写死的，如果是jq插件呢，就是把它弄成一个可配参数，然后用户传一堆html字符串过去。。。然后我想监听自己传的内容，jq插件就再给一个可配参数，把监听函数传个它（html字符串中预设好js钩子，在可配函数绑在这个钩子上）。vue里呢？组件世界里提供了slot的概念，其实内部也是编译自定义的slot到组件的里，可是怎么监听这个slot的事件呢？先看看作者是怎么说的：（上英文。。。）
You cannot listen to events on
It seems you are trying to make a slot container communicate with a slot child - in most cases this means the two components are coupled by-design, so you can do something like this.$parent.$emit(...) from the child, and listen to that event in the parent with this.$on(...).
I am still open to ideas on improving the ways slot parent and child can communicate, but events on
大致意思是：你不能直接在
this.$parent.$emit(...) // 在slot的组件里直接触发父组件的事件
this.$on(...) // 在父组件上注册好事件等待slot的组件来通信
作者说他也在思考如何提高slot的父组件和子组件的通信方式，但是直接<slot @="">这种方式应该不是一个对的方向。
例如：我们要开发一个平铺的单选筛选组件：
东 | 南 | 西 |北 | 中
我们希望我们调用的代码是这个样的：
<x-select-text class="ml-10" @x-select-item-clicked="changeStatus" :activeId="typeId">
<x-select-text-item id="0">东</x-select-text-item>
<x-select-text-item id="4">南</x-select-text-item>
<x-select-text-item id="1">西</x-select-text-item>
<x-select-text-item id="3">北</x-select-text-item>
<x-select-text-item id="2">中</x-select-text-item>
</x-select-text>
我们的组件该怎么写呢？是的，我们靠slot来完成：
<template>
<div class="x-select-text">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'XSelectText',
data () {
return {}
},
props: {
activeId: {
type: [String, Number],
default: ''
},
seprator: {
type: String,
default: '|'
}
}
}
</script>
<style lang="scss" scoped>
.x-select-text {
display: inline-block;
vertical-align: middle;
&:before,&:after{
display: table;
content: "";
clear: both;
}
}
</style>
<template>
<span class="x-select-text-item">
<span class="x-select-text-item__inner" @click="clicked" :class="{highlight: activeId === id}">
<slot></slot>
</span><span class="x-select-text__separator"> {{ seprator }} </span>
</span>
</template>
<script>
export default {
name: 'XSelectTextItem',
props: {
id: {
type: [String, Number],
default: ''
}
},
computed: {
activeId () {
return this.$parent.activeId
},
seprator () {
return this.$parent.seprator
}
},
methods: {
clicked () {
this.$parent.$emit('x-select-item-clicked', {
id: this.id,
content: this.$slots.default[0].text
})
}
}
}
</script>
<style lang="scss" scoped>
.x-select-text-item {
float: left;
font-size: 16px;
line-height: 1;
&:last-child .x-select-text__separator {
display: none;
}
}
.x-select-text-item__inner {
cursor: pointer;
}
.x-select-text__separator {
color: rgb(191, 203, 217);
margin: 0px 8px;
}
</style>
恩，是的，就是靠this.$parent建立起slot子组件和父组件的通信关系的，使用起来比只写一个组件，例如传给
哎~