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> ~~~