vue中插槽

    当定义完一个组件后，可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。
  1.  在定义`template`时，在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。
  2. 插槽可以设置默认值。在定义template时，用`slot`标签包裹起来即可，当没有传递值时就使用默认值，但传值后，则使用新的值。
  3. 当自定义组件中有多个插槽时，可以通过命名插槽来区分。如果没有指定名字，默认是有一个名字叫做 `default`
    　　　　1）命名方法：在`slot`中添加`name`属性。如：`<slot name="name-1"></slot>`
    　　　　2）使用方法：在组件标签下包裹中使用`<template v-slot="插槽名">插槽值</template>

　　4. 插槽当中的变量是从父组件的变量中读取的，而非从该组件中读取。也就是说：在插槽中使用`{{  }}` 定义的变量时，这个变量一定是在使用父组件的data中定义的。

　　5.  组件中的变量传给插槽：

　　　　1）把需要传递给插槽的变量绑定到`slot`上
       　　 2）在使用插槽的时候，指定名称后，加上一个名称，这个名称可以随便取，那么绑定到`slot` 上的所有属性都可以通过这个名称获得。
            <template v-slot:header="headerDate">
                {{headerDate.header_line}}
            </template>
        　　3）如果只有一个插槽，并且这个插槽的名字是叫做default，那么就可以把属性定义放到组件上。
        <Containter v-slot="data">
          {{data.title}}
        </Containter>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue中插槽</title>
</head>

<body>
    <div id="app">
        <nav-link url="https://www.baidu.com">百度</nav-link>
        多插槽
        <nav-link-2>百度
            <template v-slot:slot2>谷歌</template>
            <template v-slot:slot3>搜狗</template>
        </nav-link-2>
        <nav-link-3>
            <template v-slot:header="headerDate">
                {{headerDate.header_line}}
            </template>
            <template v-slot:footer="footerData">
                <div>
                    {{footerData.address}}
                </div>
                <div>
                    {{footerData.aboutUs}}
                </div>
            </template>
        </nav-link-3>
    </div>
    <script>
        // 默认值
        Vue.component('nav-link', {
            props: ['url'],
            template: `
            <div>
                <nav><a :href="url"><slot>谷歌</slot></a></nav>
            </div>
        `
        })
        // 多插槽
        Vue.component('nav-link-2', {
            template: `
            <nav>
                <slot></slot><slot name="slot2"></slot><slot name="slot3"></slot>
            </nav>
            `
        })
        // 作用域
        Vue.component('nav-link-3', {
            template: `
            <div>
                <nav>
                    <slot name="header" :header_line="headerLine"></slot>
                </nav>
                <footer>
                    <slot name="footer" :address="address" :aboutUs="aboutUs"></slot>
                </footer>
            </div>
            `,
            data: function () {
                return {
                    headerLine: ['百度', '谷歌'],
                    'address': "公司地址",
                    'aboutUs': "关于我们"
                }
            }
        })
        new Vue({
            el: "#app",
            data: {

            }
        })
    </script>
</body>

</html>

 

posted @ 2020-02-22 11:15  xsan  阅读(408)  评论(0)  编辑  收藏  举报