vue中默认插槽slot

最新推荐文章于 2025-07-19 12:49:59 发布

转载最新推荐文章于 2025-07-19 12:49:59 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mushitianya/p/10515425.html

文章标签：

#javascript #ViewUI

本文深入探讨了Vue.js中插槽(slot)组件的功能与使用方法。插槽作为Vue的重要特性，允许开发者在组件内部预留一个位置，用于插入外部传入的内容。通过具体代码示例，文章展示了如何定义和使用插槽，以及它如何帮助实现组件的复用性和灵活性。

    <div id="app">
      <!-- 1.2 那组件innerHTML位置以后不管有任何代码，都会被放进插槽那个坑里面去 -->
      <index>
        <span>首页</span>
        <span>首页</span>
        <span>首页</span>
        <h1>手机</h1>
      </index>
    </div>
    <script>
      // 插槽的作用就是组件外部取代码片段放到组件内部来
      // 1.1 定义默认插槽通过slot组件定义，定义好了之后，就相当于一个坑，你可以把它理解为电脑上usb插口
      Vue.component('index', {
        template: `
          <div>
            index
            <slot></slot>
          </div>
        `
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>

转载于:https://www.cnblogs.com/mushitianya/p/10515425.html