一般來(lái)說(shuō),在Vue項(xiàng)目中使用父子組建時(shí),都是把通用的HTML結(jié)構(gòu)提取出來(lái)寫(xiě)成一個(gè)子組件,需要?jiǎng)討B(tài)展示的數(shù)據(jù)用過(guò)prop屬性傳遞,不過(guò)有時(shí)候我們可能想給子組件傳遞一個(gè)HTML代碼,這個(gè)時(shí)候用prop不太適用,Vue給我們提供了slot(插槽)可以實(shí)現(xiàn)這種應(yīng)用場(chǎng)景.下面是自己學(xué)習(xí)后總結(jié)的幾種插槽使用方式 1. 普通使用方式 子組件 <template><div><!-- 如果有多個(gè)插槽,可以通過(guò)name命名 --><div style="background-color: yellowgreen"><slot name="header"></slot></div><!-- 父組件傳遞過(guò)來(lái)的值會(huì)展示在slot標(biāo)簽中 --> <slot></slot><ul v-if="todo"><li>姓名: {{todo.name}}</li><li>年齡: {{todo.age}}</li><li>愛(ài)好: {{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"><!-- 這里的內(nèi)容會(huì)渲染到子組件name為header的標(biāo)簽中 --><template slot="header"><p>放在頭部的內(nèi)容</p></template><!-- 子組件雙標(biāo)簽中的內(nèi)容會(huì)被渲染到子組件的slot標(biāo)簽里 --><h3>插槽標(biāo)題</h3><!-- 這里的內(nèi)容會(huì)渲染到子組件name為footer的標(biāo)簽中 --><template slot="footer"><p>放在底部的內(nèi)容</p></template></child></div> </template><script> import child from './child' export default {name: 'parent',components: {child},data () {return {list: {name: '靈夢(mèng)', age: 18, text: '熱愛(ài)學(xué)習(xí)', hobby: '踢足球'}}}} </script>

渲染效果:

?

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

?

渲染出來(lái)的效果是這樣,第二項(xiàng)李明的展示內(nèi)容就改變了 在很多Vue的插件中也有使用作用域插槽的,比如element-ui的table組件,它就可以通過(guò)添加作用域插槽改變渲染的原始數(shù)據(jù)

轉(zhuǎn)載于:https://www.cnblogs.com/steamed-twisted-roll/p/10001512.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。