使用slot场景一：

 

　　子组件Minput.vue

 

　　<inputtype='text'/>

 

　　父组件Minput

 

　　<Minput>可以显示吗</Minput>

 

　　这种情况下Minput标签内的文字是不会渲染出来的

 

　　如果现在想在里面把文字渲染出来怎么办

 

　　好用slot

 

　　子组件

 

　　<inputtype='text'/>

 

　　<slot></slot>

 

　　这样的话，父组件的里面的文字就可以渲染出来

 

　　场景二：具名插槽

 

　　子组件he.vue

 

　　<header>

 

　　<slotname='header'></slot>

 

　　</header>

 

　　父组件

 

　　<he>

 

　　<h1name='header'>helloworld</h1>

 

　　</he>

 

　　渲染出来的结果就是

 

　　<header><h1>helloworld</h1></header>

 

　　场景三

 

　　子组件child

 

　　<div>

 

　　<h1>这是h1</h1>

 

　　<slot>这是分发内容,只有在没有分发内容的情况下显示</slot>

 

　　</div>

 

　　父组件

 

　　<child>

 

　　<p>这是一段p</p>

 

　　<p>两段p</p>

 

　　</child>

 

　　渲染出来就是

 

　　<div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>

 

　　如果父组件

 

　　<child></child>

 

　　那么渲染出来的就是

 

　　<div><h1>这是h1</h1>这是分发内容，只有在没有分发内容的情况下显示</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>






本文转载自中文网