文享日志

Vue插槽

Vue.js JavaScript

发表于2018年05月29日00:34:52

0条评论 256次阅读

插槽有两种:匿名插槽与实名插槽。


匿名插槽示例:

创建标签模板:

<template id="my-data">

    <div>

        <header>匿名插槽头部header>

        <slot>插槽中部slot>

        <footer>匿名插槽尾部footer>

    div>

template>


注册组件:

Vue.component("mydata", {
    template: "#my-data",
})


匿名插槽使用示例:

<div id="app">

    <mydata>

        <p>匿名插槽成功p>

    mydata>

div>


实名插槽示例:

创建标签模板:

<template id="my-data2">

    <div id="computer">

        <slot name="cpu">这是CPUslot>

        <slot name="memory">这是内存slot>

        <slot name="gpu">这是gpuslot>

        <slot name="disk">这是硬盘slot>

    div>

template>


组件注册

Vue.component("mydata2", {
    template: "#my-data2",
})


实名插槽使用示例:

<div id="app">

    <mydata2>

        <p slot="cpu">这是我的CPUp>

        <p slot="memory">这是我的内存p>

        <p slot="gpu">这是我的GPUp>

        <p slot="disk">这是我的硬盘p>

    mydata2>

div>



使用插槽,注意掌握slot。

模板中是有name属性的slot标签,调用时是slot属性。

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广