(十)、插槽 slot
1.内容分发
在Vue.js中我们使用slot元素作为承载分发内容的出口，作者称为插槽，可以用在组合组件的场景中。
留一个接口供我们进行数据的导入
2.测试插槽
比如准备制作一个待办事项组件（books) ， 该组件由待办标题（book-title） 和待办内容（book-name）组成，但这三个组件又是相互独立的，该如何操作呢？
在Model层设置插槽的时候，给插槽起名字(就是绑定其他组件(名字所属者))。在view层的时候进行绑定插槽(绑定的是起名字的组件)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<books>
// 绑定插槽，并且绑定属性和值
<book-title slot="book-title" v-bind:titles="titles1"></book-title>
<book-name slot="book_name" v-for="array in arrays" v-bind:book_name="array"></book-name>
</books>
</div>
<script>
// slot 插槽设置
Vue.component('books',{
template:
'<div>'+
// 给插槽设置名字，目的是绑定下面的组件，以及被view层绑定
'<slot name="book-title"></slot>'+
'<ul>' +
'<slot name="book_name"></slot>'+
'</ul>'+
'</div>'
});
Vue.component('book-title',{
props:['titles'],
template: '<div>{{titles}}</div>'
});
Vue.component('book-name',{
props:['book_name'],
template:'<li>{{book_name}}</li>'
});
let vue = new Vue({
el:'#app',
data:{
arrays:['c++','java','c'],
titles1:'书籍列表'
}
});
</script>
</body>
</html>
(十一)、自定义内容分发
1.简介自定义内容分发
通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数)
2.示意图
3.自定义内容事件测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<books>
<!-- 绑定的属性十我们自定义的props, 然而绑定的值是data里面的数据. 第一个遍历值和坐标，第二个: 绑定组件值。第三个: 绑定组件下标。第四个:绑定组件中的remove方法-->
<book-name slot="book_name" v-for="(array,index1) in arrays" v-bind:book_name="array" v-bind:index="index1" v-on:remove="removeItem(index1)"></book-name>
</books>
</div>
<script>
// slot 插槽
Vue.component('books',{
template:
'<div>'+
'<slot name="book-title"></slot>'+
'<ul>' +
'<slot name="book_name"></slot>'+
'</ul>'+
'</div>'
});
Vue.component('book-title',{
props:['titles'],
template: '<div>{{titles}}</div>'
});
Vue.component('book-name',{
props:['book_name','index'],
template:'<li>{{index}}---{{book_name}}<button @click="remove">清除</button></li>',
methods:{
remove:function (index){
// 自定义事件名 ，传递的参数
this.$emit('remove',index)
}
}
});
let vue = new Vue({
el:'#app',
data:{
arrays:['c++','java','c'],
titles1:'书籍列表'
},
methods:{
removeItem:function (index){
console.log('删除了'+this.arrays[index]);
this.arrays.splice(index,1); //一次删除一个元素，这个方法是Js的方法
}
}
});
</script>
</body>
</html>
(十二)、第一个Vue-cil项目
1.Vue-cil简介
Vue-cil 官方提供的一个脚手架 用于快速生成一个vue的项目模板
预先定义好的目录结构及基础diamagnetic，就好比咱们再创建Maven项目的时候可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加加速。
主要功能:
2.需要的环境
3.安装Node.js淘宝镜像加速器
# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org
4.安装Vue-cil
npm install -g @vue/cli
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
5.安装路径
C:\Users\22612\AppData\Roaming\npm
6.具体步骤
(1).创建一个Vue项目
创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录
(2).创建一个基于webpack模板的vue应用程序
#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue
一路都选择no即可；
说明：
Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！
(3).初始化并运行
cd myvue 进入文件夹
npm install 初始化
npm run dev 启动
(4).模板项目结构（各文件夹）
- 1.node_modules //npm install
- public
（1）favicon.ico: 页签图标
（2）index.html: 主页面
- 3.src
（1）assets: 存放静态资源
（2）component: 存放组件 - 4.App.vue: 汇总所有组件
- 5.main.js: 入口文件
- 6.gitignore: git 版本管制忽略的配置
- babel.config.js: babel 的配置文件
- README.md: 应用描述文件
- package-lock.json：包版本控制文件
