2.%20封装思路用%20elementUI%20弹窗组件封装整个子组件，里面包裹复选框（存储筛选条件）
父组件监听子组件的事件并书写筛选逻辑
复选框选项存储在%20utils.js%20文件中（我这里先实现了对年份的筛选，如果需要其他的文字筛选，可以将对应的数据添加到%20utils.js文件中）
项目结构如下：
![]()
3.%20问题记录3.1%20父组件没有成功监听子组件事件的原因
emit字符串，必须是小写，不能是驼峰，否则无法监听
3.2%20html%20引用的%20js文件，添加了时间戳，防止缓存 ![]()
3.3%20代码一览
utils.js：数据文件
(function%20(window)%20{
%20%20%20%20let%20wordsList%20=%20[{
%20%20%20%20%20%20%20%20prop:%20'2019',
%20%20%20%20%20%20%20%20label:%20'2019年',
%20%20%20%20%20%20%20%20width:%20100,
%20%20%20%20%20%20%20%20show:%20true,
%20%20%20%20},{
%20%20%20%20%20%20%20%20prop:'2020',
%20%20%20%20%20%20%20%20//%20...
%20%20%20%20]
%20%20%20%20window.utils2%20=%20{%20wordsList%20}
})(window)
index.js：父组件监听封装子组件的文字过滤筛选逻辑
const%20wordsFliter%20=%20httpVueLoader('./components/words-fliter.vue');
new%20Vue({
%20%20el:%20'#app',
%20%20components:%20{%20wordsFliter%20},
%20%20data:%20function()%20{
%20%20%20%20return%20{
%20%20%20%20%20%20wordsList:%20JSON.parse(JSON.stringify(utils2.wordsList)),
%20%20%20%20}
%20%20},
%20%20methods:%20{
%20%20%20%20//%20文字筛选
%20%20%20%20handleWordsChange(list)%20{
%20%20%20%20%20%20this.wordsList%20=%20list;
%20%20%20%20%20%20const%20arr%20=%20[];
%20%20%20%20%20%20for(let%20item%20of%20this.wordsList)%20{
%20%20%20%20%20%20%20%20if%20(item.show)%20{
%20%20%20%20%20%20%20%20%20%20arr.push(item.prop)
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20}
%20%20%20%20%20%20this.tableData%20=%20this.tableData.filter(col%20=>%20arr.indexOf(col.YEAR)%20>%20-1);
%20%20%20%20}
%20%20},
})
words-fliter.vue：封装的文字过滤筛选子组件
<template>
%20%20<el-popover
%20%20%20%20class="table-words-fliter"
%20%20%20%20placement="bottom-end"
%20%20%20%20width="180"
%20%20%20%20v-model="visible"
%20%20>
%20%20%20%20<div%20class="table-fliter-title">文字筛选</div>
%20%20%20%20<div%20class="table-fliter-body">
%20%20%20%20%20%20<el-scrollbar%20style="height:%20300px">
%20%20%20%20%20%20%20%20<div%20class="table-fliter-checkbox">
%20%20%20%20%20%20%20%20%20%20<!--%20渲染复选框%20-->
%20%20%20%20%20%20%20%20%20%20<el-checkbox
%20%20%20%20%20%20%20%20%20%20%20%20:label="item.label"
%20%20%20%20%20%20%20%20%20%20%20%20v-for="(item,index)%20in%20dataList"
%20%20%20%20%20%20%20%20%20%20%20%20:key="index"
%20%20%20%20%20%20%20%20%20%20%20%20v-show="!item.always"
%20%20%20%20%20%20%20%20%20%20%20%20v-model="item.show"
%20%20%20%20%20%20%20%20%20%20></el-checkbox>
%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20</el-scrollbar>
%20%20%20%20%20%20<div%20class="table-fliter-btns">
%20%20%20%20%20%20%20%20<el-button%20size="mini"%20type="primary"%20@click="changeFliter()"
%20%20%20%20%20%20%20%20%20%20>确定</el-button
%20%20%20%20%20%20%20%20>
%20%20%20%20%20%20</div>
%20%20%20%20</div>
%20%20%20%20<!--%20主页显示的图标%20-->
%20%20%20%20<el-button%20type="info"%20size="mini"%20slot="reference"%20icon="el-icon-search"
%20%20%20%20%20%20>文字筛选</el-button
%20%20%20%20>
%20%20</el-popover>
</template>
<script>
%20%20module.exports%20=%20{
%20%20%20%20props:%20{
%20%20%20%20%20%20wordslist:%20Array,%20//%20接受父组件传的弹出框复选框选项
%20%20%20%20},
%20%20%20%20data()%20{
%20%20%20%20%20%20return%20{
%20%20%20%20%20%20%20%20visible:%20false,%20//%20弹出框是否可见
%20%20%20%20%20%20%20%20dataList:%20[],%20//%20双向绑定复选框选项
%20%20%20%20%20%20};
%20%20%20%20},
%20%20%20%20created()%20{
%20%20%20%20%20%20this.dataList%20=%20JSON.parse(JSON.stringify(this.wordslist));
%20%20%20%20},
%20%20%20%20methods:%20{
%20%20%20%20%20%20changeFliter()%20{
%20%20%20%20%20%20%20%20this.visible%20=%20false;%20//%20弹出框关闭
%20%20%20%20%20%20%20%20this.$emit("changewords",%20this.dataList);%20//%20子组件给父组件传递事件和参数
%20%20%20%20%20%20},
%20%20%20%20},
%20%20};
</script>
index.html：主页面
<!--%20文字筛选按钮%20-->
<words-fliter
%20%20:wordslist="wordsList"
%20%20@changewords="handleWordsChange"
></words-fliter>
<!--%20防止缓存%20添加时间戳%20-->
<script%20src='./js/utils.js?v="%20+%20Date.now()%20+%20"'></script>
<script%20src='./js/utils2.js?v="%20+%20Date.now()%20+%20"'></script>
<script%20src='./js/index.js?v="%20+%20Date.now()%20+%20"'></script>
二.%20MarkDown%20初识1.%20标题- 使用%20=%20和%20-%20标记一、二级标题
- 使用%20#%20号标记六个标题
我展示的是一级标题
=================
我展示的是二级标题
-----------------
#%20一级标题
##%20二级标题
###%20三级标题
####%20四级标题
#####%20五级标题
######%20六级标题
2.%20段落、字体段落的换行：两个以上空格%20+%20回车
在段落后面使用一个空行表示%20重新开始一段
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
3.%20线//%20下面是分隔线
***
*%20*%20*
*****
-%20-%20-
----------
//%20下面是删除线
~~%20我是删除线%20~~
//%20下面是下划线
<u>带下划线文本</u>
//%20下面是脚注
[^要注明的文本]
4.%20列表、区块//%20无序列表%20*+-%20后面跟空格
*%20第一项
+%20第一项
-%20第一项
//%20有序列表%20数字后面跟着点
1.%20第一项
2.%20第二项
3.%20第三项
//%20列表嵌套%20在子列表的前面加四个空格
1.%20第一项：
%20%20%20%20-%20第一项嵌套的第一个元素
%20%20%20%20-%20第一项嵌套的第二个元素
//%20在区块中使用列表%20区块是%20>+空格
*%20第一项
%20%20%20%20>%20我是列表引用的区块
>%20区块中使用列表
>%201.%20我是区块中的列表
5.%20代码块//%20反单引号包裹函数，反单引号（英文模式下的%20~）
`printf()`%20函数
//%20代码块可以用%20```%20or%20tab键%20or%20四个空格
6.%20链接、图片- [链接名称](链接地址)
- <链接地址>
- <img%20src="%20"%20width="50%">
- 
7.%20表格|%20%20表头%20%20%20|%20表头%20%20|
|%20%20----%20%20|%20----%20%20|%20%20//%20这个符号用来区分%20表头%20和%20表身
|%20单元格%20%20|%20单元格%20|
//%20对齐方式
|%20左对齐%20|%20右对齐%20|%20居中对齐%20|
|%20:-----|%20----:%20|%20:----:%20|
|%20单元格%20|%20单元格%20|%20单元格%20|
|%20单元格%20|%20单元格%20|%20单元格%20|