首页 / 知识

为什么slot都是用在子组件

2023-04-11 15:08:00

　　使用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>






本文转载自中文网

组件文字标签显示都是用在

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢