温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

slot使用实例分析

发布时间:2022-03-25 13:56:25 来源:亿速云 阅读:167 作者:iii 栏目:web开发

这篇文章主要介绍“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使用实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI