component -- slot 插槽 · Vue&&TypeSprict--基础总结

>[success] # slot -- 插槽 ~~~ 1.插槽作用就是由于插件又可以能外部人员需要添加一些自定的代码，但由于组件标签之中是无法插入内容的因此有了插槽，简单的说就是提供预留项 2. 解释一下什么叫组件中间插入不进标签： '<com><div>在com组件中我是不可以直接插入的</div> </com>' ~~~ >[danger] ##### 插槽案例 ~~~ 1.插槽有两种一种是用name命名，然后添加的插槽进入指定的预留位置 2.另一种是<slot>没有name，那么不管添加的什么标签都会进入这个slot中 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <com>  <h1 slot ="first"> 我对应first插槽</h1> <h1 slot ="second"> 我对应second插槽</h1> <h1 slot ="third"> 我对应third插槽</h1> <h1 > 我对应没有name 的插槽</h1>  </com> </div> <template id="com"> <div> {{msg}}  <slot name="first"></slot> <slot name="second"></slot> <slot name="third"></slot> <slot name="default"></slot> </div> </template> <script type="text/javascript"> let com = { template:'#com', data(){ return{ msg:"插槽" } } }; var vm = new Vue({ el: "#app", data: { }, components: { com, } }) </script> </body> </html> ~~~ >[success] # 作用域插槽 -- slot-scope ~~~ 1.回想一下我们使用elementUi的table的时候row就能拿到当前table中的一整行信息，这是因为使用了slot-scope 2 ~~~ >[danger] ## 案例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <com :todos="todos">  <template slot-scope="slotProps">  <span v-if="slotProps.todos.isComplete">✓</span> <span>{{slotProps.todos.text}}</span> </template> </com> </div> <template id="com"> <div> <ul> <li v-for="todo in todos" :key="todo.id"> <slot :todos="todo"> </slot> </li> </ul> </div> </template> <script type="text/javascript"> let com = { template:'#com', props:['todos'], data(){ return{ msg:"插槽" } } }; var vm = new Vue({ el: "#app", data: { todos: [ { id: 0, text: 'ziwei0', isComplete: false }, { text: 'ziwei1', id: 1, isComplete: true }, { text: 'ziwei2', id: 2, isComplete: false }, { text: 'ziwei3', id: 3, isComplete: false } ] }, components: { com, } }) </script> </body> </html> ~~~