一般來說,在Vue項目中使用父子組建時,都是把通用的HTML結構提取出來寫成一個子組件,需要動態展示的數據用過prop屬性傳遞,不過有時候我們可能想給子組件傳遞一個HTML代碼,這個時候用prop不太適用,Vue給我們提供了slot(插槽)可以實現這種應用場景.下面是自己學習后總結的幾種插槽使用方式 1. 普通使用方式 子組件 <template><div><!-- 如果有多個插槽,可以通過name命名 --><div style="background-color: yellowgreen"><slot name="header"></slot></div><!-- 父組件傳遞過來的值會展示在slot標簽中 --> <slot></slot><ul v-if="todo"><li>姓名: {{todo.name}}</li><li>年齡: {{todo.age}}</li><li>愛好: {{todo.hobby}}</li></ul><div style="color: gold"><slot name="footer"></slot></div></div> </template><script> export default {name: 'child',props: {todo: Object},data () {return {}},created () {console.log(this.todo, 'todo')} }</script>// 父組件 <template><div><!-- 引入子組件 --><child :todo="list"><!-- 這里的內容會渲染到子組件name為header的標簽中 --><template slot="header"><p>放在頭部的內容</p></template><!-- 子組件雙標簽中的內容會被渲染到子組件的slot標簽里 --><h3>插槽標題</h3><!-- 這里的內容會渲染到子組件name為footer的標簽中 --><template slot="footer"><p>放在底部的內容</p></template></child></div> </template><script> import child from './child' export default {name: 'parent',components: {child},data () {return {list: {name: '靈夢', age: 18, text: '熱愛學習', hobby: '踢足球'}}}} </script>

渲染效果:

?

2. 作用域插槽 如果你希望從子組件獲取數據,進行其他數據展示,這個時候你可以使用作用域插槽 子組件 <template><div><ul v-if="todo.length" v-for="item in todo" :key="item.id"><li>姓名: {{item.name}}</li><li>年齡: {{item.age}}</li><li>愛好: {{item.hobby}}</li></ul></div> </template> <script> export default {name: 'child',props: {todo: Array}</script>// 父組件 <template><div><!-- 引入子組件 --><child :todo="list"></child></div> </template><script> import child from './child' export default {name: 'parent',components: {child},data () {return {list: [{name: '靈夢', age: 18, text: '熱愛學習', hobby: '踢足球', id: 1},{name: '李明', age: 13, text: '畫畫很棒', hobby: '畫畫', id: 2},{name: '韓梅梅', age: 25, text: '性格文靜', hobby: '做手工', id: 3}]}}} </script> 普通調用,渲染出來的數據就是這樣,但是如果我們想在第二項渲染中把hobby改成text,這時候就需要子組件把數據傳過來,父組件改變渲染方式了 // 子組件 <template><div><ul v-if="todo.length" v-for="(item,index) in todo" :key="item.id"><li>姓名: {{item.name}}</li><li>年齡: {{item.age}}</li><!-- 如果是第二項,就使用作用域插槽,重新展示 --><li v-if="index === 1"><!-- 定義了content把item傳遞到父組件,定義的名字可以隨意取,需要傳遞的數據寫在后面 --><slot :content="item"></slot></li><li v-else>愛好: {{item.hobby}}</li></ul></div> </template> <script> export default {name: 'child',props: {todo: Array}</script>// 父組件 <template><div><!-- 引入子組件 --><child :todo="list"><!-- 在子組件用slot-scope結收傳遞過來的數據,接收的名字可以隨意取 --><template slot-scope="scope"><!-- scope后接的就是你在子組件定義的傳遞值的名稱,scope.content就拿到了傳遞過來的值,在這里可以直接使用 -->描述: {{scope.content.text}}</template></child></div> </template><script> import child from './child' export default {name: 'parent',components: {child},data () {return {list: [{name: '靈夢', age: 18, text: '熱愛學習', hobby: '踢足球', id: 1},{name: '李明', age: 13, text: '畫畫很棒', hobby: '畫畫', id: 2},{name: '韓梅梅', age: 25, text: '性格文靜', hobby: '做手工', id: 3}]}}} </script>

?

渲染出來的效果是這樣,第二項李明的展示內容就改變了 在很多Vue的插件中也有使用作用域插槽的,比如element-ui的table組件,它就可以通過添加作用域插槽改變渲染的原始數據

轉載于:https://www.cnblogs.com/steamed-twisted-roll/p/10001512.html

總結

以上是生活随笔為你收集整理的Vue.js插槽slot和作用域插槽slot-scope学习小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。