前端笔记Vue项目第3天 4

最新推荐文章于 2024-07-24 13:33:51 发布

我是楠楠

最新推荐文章于 2024-07-24 13:33:51 发布

阅读量137

点赞数

分类专栏：技术文章

本文链接：https://blog.csdn.net/qq_40208605/article/details/104984145

版权

本文探讨Vue组件的复用性，重点讲解了匿名插槽和具名插槽的使用，包括如何通过<slot>元素的'name'属性来绑定和定义具有名字的插槽，以增强组件的灵活性和可定制性。

摘要由CSDN通过智能技术生成

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

匿名插槽

<div id="app">
    <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>
 
  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
        # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
        # 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
         
      }
    });
  </script>
</body>
</html>

具名插槽