Vue 插槽(slot)使用

原创

有勇气的牛排

发布于 2023-06-25 23:27:26

1320

发布于 2023-06-25 23:27:26

文章被收录于专栏：有勇气的牛排专栏

1 为什么使用slot

组件的插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部一些内容到底展示了什么。

举例：

移动开发中，几乎每个页面都有导航栏
导航栏我们会分装成一个插件，比如nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用了

<!--
1. 插槽的基本使用 <slot></slot>
2.插槽的默认值：<slot>button</slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->

<div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn></cpn>
    <cpn><span>标签</span></cpn>
</div>

<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>666</p>
        <slot><button>默认为按钮</button></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

2 具名插槽使用（导航）

<div id="app">
    <cpn><span slot="center">标题</span></cpn>
    <cpn><button slot="center">标题</button></cpn>
</div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

3 作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn></cpn>

    <cpn>
        <!-- 目的是获取子组件中的pLanguages -->
        <template v-slot="slot">
            <span v-for="item in slot.data">{{ item }} * </span>
        </template>
    </cpn>

    <cpn>
        <!-- 目的是获取子组件中的pLanguages -->
        <!-- .join 将数组，转为字符串 -->
        <template v-slot="slot">
            <span>{{ slot.data.join(' * ') }}</span>
        </template>
    </cpn>

</div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{ item }}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }
        }
      }
    }
  })
</script>

仓库地址：## 1 为什么使用slot

组件的插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部一些内容到底展示了什么。

举例：

移动开发中，几乎每个页面都有导航栏
导航栏我们会分装成一个插件，比如nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用了

<!--
1. 插槽的基本使用 <slot></slot>
2.插槽的默认值：<slot>button</slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->

<div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn></cpn>
    <cpn><span>标签</span></cpn>
</div>

<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>666</p>
        <slot><button>默认为按钮</button></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

2 具名插槽使用（导航）

<div id="app">
    <cpn><span slot="center">标题</span></cpn>
    <cpn><button slot="center">标题</button></cpn>
</div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

3 作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn></cpn>

    <cpn>
        <!-- 目的是获取子组件中的pLanguages -->
        <template v-slot="slot">
            <span v-for="item in slot.data">{{ item }} * </span>
        </template>
    </cpn>

    <cpn>
        <!-- 目的是获取子组件中的pLanguages -->
        <!-- .join 将数组，转为字符串 -->
        <template v-slot="slot">
            <span>{{ slot.data.join(' * ') }}</span>
        </template>
    </cpn>

</div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{ item }}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }
        }
      }
    }
  })
</script>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端