17.插槽与自定义事件（插槽是为了确定组件摆放的位置）
1.新建一个项目文件夹“插槽” 2.在“插槽"文件夹下创建index.html 3.index.html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js--> <title>Vue插槽</title> </head> <body> <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容--> <!--view展示层--> <div id="app"> <!--显示data中的数据--> <!--使用组件todo--> <todo> <!--使用todo-title组件，--> <!--todo组件中使用slot(插槽)，插入组件todo-title--> <!--使用v-bind,将data中title变量值传入到组件todo-title中--> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <!--先使用v-for，遍历leixinglist的内容，给leixingone，在通过v-bind将leixingone赋值给contentone，进而传入到插件todo-contentone的变量contentone中使用--> <todo-contentone slot="todo-contentone" v-for="leixingone in leixinglist" v-bind:contentone="leixingone"></todo-contentone> </todo> </div> <div><slot name="todo-title"></slot><ul><slot name="todo-todo-contentone"></slot></ul></div> <!--viewmodel脚本控制层--> <script> //定义一个组件 //第一个参数为组件的名字 //第二个参数为组件的内容 //第二个参数中的template,为html显示层的模板 //定义待办事项组件 Vue.component("todo",{ template:'<div><slot name="todo-title"></slot><ul><slot name="todo-contentone"></slot></ul></div>' //模板中使用了插槽slot }) //定义待办事项标题组件 Vue.component("todo-title",{ props:["title"], //组件中传入的变量不能被template中的内容直接使用，需要用props来获取变量，然后再在template中使用 template:' <div>{{title}}</div>' //模板中使用组件中传入的zujianleixingone的变量参数 }) //定义待办事项内容组件 Vue.component("todo-contentone",{ props:["contentone"], //组件中传入的变量不能被template中的内容直接使用，需要用props来获取变量，然后再在template中使用 template:' <li>{{contentone}}</li>' //模板中使用组件中传入的zujianleixingone的变量参数 }) //Vue（），就是viewModel层的内容 var app = new Vue({ el: '#app', //el为element的缩写，挂载元素 data: { //这个data,就是model层，即数据内容 title:"分类", leixinglist:["美女","帅哥","萝莉","御姐"] } }) </script> </body> </html>
18.自定义事件
1.在子组件中定义一个事件remove 2.这个事件会通过this.$emit("remove1")，调用一个自定义事件"remove1" 3.这个自定义事件会调用函数removeone(index)，需要传入index 4.可以通过 v-for="(leixingone,index) in leixinglist"来获取index 5.在使用index前，要先用v-bind:index="index" 来绑定一个index变量 6.点击子组件的按钮，完成删除父组件中的内容 index.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js--> <title>Vue插槽</title> </head> <body> <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容--> <!--view展示层--> <div id="app"> <!--显示data中的数据--> <!--使用组件todo--> <todo> <!--使用todo-title组件，--> <!--todo组件中使用slot(插槽)，插入组件todo-title--> <!--使用v-bind,将data中title变量值传入到组件todo-title中--> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <!--先使用v-for，遍历leixinglist的内容，给leixingone，在通过v-bind将leixingone赋值给contentone，进而传入到插件todo-contentone的变量contentone中使用--> <!--5.此处自定义一个事件remove1,此事件为调用外部函数removeone--> <!--8.用v-for="(leixingone,index) in leixinglist",可以获取index--> <!--9.v-bind:index="index",将要使用的index进行绑定，才能使用--> <todo-contentone slot="todo-contentone" v-for="(leixingone,index) in leixinglist" v-bind:contentone="leixingone" v-bind:index="index" v-on:remove1="removeone(index)"></todo-contentone> </todo> </div> <!--viewmodel脚本控制层--> <script> //定义一个组件 //第一个参数为组件的名字 //第二个参数为组件的内容 //第二个参数中的template,为html显示层的模板 //定义代办事项组件 Vue.component("todo",{ template:'<div><slot name="todo-title"></slot><ul><slot name="todo-contentone"></slot></ul></div>' //模板中使用了插槽slot }) //定义代办事项标题组件 Vue.component("todo-title",{ props:["title"], //组件中传入的变量不能被template中的内容直接使用，需要用props来获取变量，然后再在template中使用 template:' <div>{{title}}</div>' //模板中使用组件中传入的zujianleixingone的变量参数 }) //定义代办事项内容组件 Vue.component("todo-contentone",{ //10.props中也要添加"index" props:["contentone","index"], //组件中传入的变量不能被template中的内容直接使用，需要用props来获取变量，然后再在template中使用 //2-用v-on:click绑定一个点击事件 //3-@click就等于v-on:click //11.{{index}}，使用index template:' <li>{{index}}---{{contentone}}<button v-on:click="remove">删除1</button><button @click="remove">删除2</button></li>', //模板中使用组件中传入的zujianleixingone的变量参数 methods:{ //1-在组件中写一个方法 remove:function () { // alert(1) this.$emit("remove1") //6.使用this.$emit绑定自定义事件remove1 } } }) //Vue（），就是viewModel层的内容 var app = new Vue({ el: '#app', //el为element的缩写，挂载元素 data: { //这个data,就是model层，即数据内容 title:"分类", leixinglist:["美女","帅哥","萝莉","御姐"] }, methods: { //4-组件外定义一个事件 removeone:function (index) { alert("hello") //7.删除leixinglist中的数据 this.leixinglist.splice(index,1) //splice第一个参数为要删除的index,第二个参数为0，表示不删除，为1，表示删除一个，为2表示删除两个... } } }) </script> </body> </html>
19.vue-cli使用