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使用实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网JavaScript频道，小编每天都会为大家更新不同的知识点。