组件：可复用的代码可以封装成一个组件，多个组件一起构建成一个大应用
如何使用：
- 组件的注册
- 组件的事件（原生dom的事件，自定义组件的事件）
- 插槽：分发内容，需要往自定义组件中传递内容，但又不能通过属性传递时使用，主要有默认插槽，名称插槽，作用于插槽
组件的定义以及使用demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">{{message}} <ul> <!-- 自定义组件的使用 --> <!-- @delete是自定义组件中定义的事件 --> <todo-item v-for="item in list" :title="item.title" :del="item.del" @delete=handleDelete></todo-item> </ul> </div> <!-- 使用vue有两种方式，一种是引用cdn地址，一种是npm安装 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 组件的注册,第一个参数是组件名称，不能重复 Vue.component('todo-item', { // 动态属性 props: { title: String, del: { type: Boolean, // 为动态属性设置默认值 default: false } }, // 模板,可以在模板中，添加事件 template: ` <li> <span v-if="!del">{{title}}</span> <span v-else style="text-decoration: line-through;">{{title}}</span> <button v-show="!del" @click=handleClick>删除</button> </li> `, data: function () { return {} }, // 具体的方法 methods: { // 模板内部的方法，如果希望外部可以调用$emit handleClick() { console.log("test handleClick:点击删除"); this.$emit('delete', this.title) } } }) var vm = new Vue({ el: '#app', data: { message: 'hello world', item: { title: '语文', del: true }, list: [ { title: '语文', del: false }, { title: '数学', del: true }, { title: '英语', del: true } ] }, methods: { // val的值是自定义组件中传过来的值 handleDelete(val) { console.log("handleDelete:", val); } } }) </script> </body> </html>
插槽demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">{{message}} <todo-list> <!-- 使用默认插槽 --> <todo-item v-for="item in list" :title="item.title" :del="item.del" @delete=handleDelete> <!-- 旧版写法 --> <span name="pre_slot">前置插槽</span> <!-- 名称插槽，新版写法 --> <template v-slot:pre_slot="{value}"> <span>前置插槽{{value}}</span> </template> <template v-slot:suf_slot="{value}"> <span>后置插槽{{value}}</span> </template> </todo-item> </todo-list> </div> <!-- 使用vue有两种方式，一种是引用cdn地址，一种是npm安装 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 组件的注册,第一个参数是组件名称，不能重复 Vue.component('todo-item', { // 动态属性 props: { title: String, del: { type: Boolean, // 为动态属性设置默认值 default: false } }, // 模板,可以在模板中，添加事件 template: ` <li> <slot name="pre_slot" :value="value"></slot> <span v-if="!del">{{title}}</span> <span v-else style="text-decoration: line-through;">{{title}}</span> <slot name="suf_slot">默认值</slot> <button v-show="!del" @click=handleClick>删除</button> </li> `, data: function () { return { value: Math.random() } }, // 具体的方法 methods: { // 模板内部的方法，如果希望外部可以调用$emit handleClick() { console.log("test handleClick:点击删除"); this.$emit('delete', this.title) } } }) Vue.component('todo-list', { template: ` <ul> <slot></slot> </ul> `, data: function () { return { } }, methods: { } }) var vm = new Vue({ el: '#app', data: { message: 'hello world', item: { title: '语文', del: true }, list: [ { title: '语文', del: false }, { title: '数学', del: true }, { title: '英语', del: true } ] }, methods: { // val的值是自定义组件中传过来的值 handleDelete(val) { console.log("handleDelete:", val); } } }) </script> </body> </html>