slot使用實例分析

這篇文章主要介紹“slot使用實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“slot使用實例分析”文章能幫助大家解決問題。

　　使用slot場景一：

　　子組件Minput.vue

　　<inputtype='text'/>

　　父組件Minput

　　<Minput>可以顯示嗎</Minput>

　　這種情況下Minput標簽內的文字是不會渲染出來的

　　如果現在想在里面把文字渲染出來怎么辦

　　好用slot

　　子組件

　　<inputtype='text'/>

　　<slot></slot>

　　這樣的話，父組件的里面的文字就可以渲染出來

　　場景二：具名插槽

　　子組件he.vue

　　<header>

　　<slotname='header'></slot>

　　</header>

　　父組件

　　<he>

　　<h2name='header'>helloworld</h2>

　　</he>

　　渲染出來的結果就是

　　<header><h2>helloworld</h2></header>

　　場景三

　　子組件child

　　<div>

　　<h2>這是h2</h2>

　　<slot>這是分發內容,只有在沒有分發內容的情況下顯示</slot>

　　</div>

　　父組件

　　<child>

　　<p>這是一段p</p>

　　<p>兩段p</p>

　　</child>

　　渲染出來就是

　　<div><h2>這是h2</h2><p>這是一段p</p><p>兩段p</p></div>

　　如果父組件

　　<child></child>

　　那么渲染出來的就是

　　<div><h2>這是h2</h2>這是分發內容，只有在沒有分發內容的情況下顯示</div>

　　場景四:作用域插槽

　　<divclass="child">

　　<slottext="hellofromchild"></slot>

　　</div>

　　父組件

　　<divclass="parent">

　　<child>

　　<templateslot-scope="props">

　　<span>hellofromparent</span>

　　<span>{{props.text}}</span>

　　</template>

　　</child>

　　</div>

　　x渲染的話就是

　　<divclass="parent">

　　<divclass="child">

　　<span>hellofromparent</span>

　　<span>hellofromchild</span>

　　</div>

　　</div>

關于“slot使用實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。