slot——插槽和ES模块的导入导出

本文链接：https://blog.youkuaiyun.com/Phoebe4/article/details/113787225

本文深入探讨了Vue组件中的插槽概念，包括普通插槽、具名插槽和作用域插槽的使用，强调了它们在提供组件扩展性上的重要性。同时，介绍了CommonJS和ES模块化在JavaScript中的导入导出机制，阐述了它们在模块化开发中的核心作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slot——插槽和ES模块的导入导出

组件的插槽（一个预留空间）

目的：让封装更具有扩展性，让使用者可以决定组件内部一些内容究竟展示什么
如何封装：将共性抽取到组件，将不同暴露为插槽

<body>
    <div id="app">
        <cpn><button>第一个组件放入按钮</button></cpn>
        <cpn><span>第二个组件放入span标签</span></cpn>
        <cpn><h2>第三个放入h标签</h2></cpn>
        <cpn><button>这个也放入按钮</button></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>舒宝哈哈哈</h2>
            <p>婷宝哈哈哈</p>
            <slot></slot>
            <!-- 插槽也可以有默认值比如在<slot></slot>中间放一个buuton标签，此时上面组件中没有传入插槽的自定义内容就会以默认值出现-->
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "红果果"
            },
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        })
    </script>
</body>

具名插槽slot

<body>
    <div id="app">
        <cpn> <span slot="left">替换默认左边按钮</span></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>


    <template id="cpn">
            <div>
                <!-- 给slot一个name属性在上面组件运用它的时候直接给不同的内容标签一个slot属性即可替换掉默认的 -->
                <slot name="left"><button>默认左边按钮</button></slot>
                <slot name="center"><button>默认中间按钮</button></slot>
                <slot name="right"><button>默认右边按钮</button></slot>
            </div>
    </template>

    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"红果果",
            },
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        })
    </script>
</body>

编译作用域

在寻找作用域的时候会在模板里面找，此时cpn这种自创组件会被当成一个div,去vue实例作用域里面寻找需要的；如果在template标签里面就去cpn里面查找
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译

作用域插槽

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

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

        <cpn>
            <template slot-scope="slot">
                <!-- 通过template获取子组件cpn中的数据，否则直接去vue实例中找，但是找不到 -->
                <!-- <span v-for="item in slot.data">{{item}}----</span> -->

                <span>{{slot.data.join('------')}}</span>
            </template>
        </cpn>


        <cpn></cpn>
    </div>

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

    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"红果果",
            },
            components:{
                cpn:{
                    template:"#cpn",
                    data(){
                        return {
                            fruit:['banana','pear','apple','peach']
                        }
                    }
                }
            }
        })
    </script>
</body>

Commonjs（需要借助node环境才可以实现）

一个js文件就可以看成一个模块

模块化有2个核心：导入和导出
CommonJS的导出：

 module.exports={
            flag:true,
            test(a,b){
                return a+b
            },
            demo(a,b){
                return a*b
            }
        }

导入

 var {flag,sum}=require('./模块化a.js')

ES模块化的导入和导出

新增的2个关键字：export,import
1、导入文件的时候加上type属性

 <script src="./模块化a.js" type="module"></script>

2、导出和导入


        //导入
        import {flag,sum} from "./模块化a.js"
        import {mulfun} from "./模块化a.js"

        //导出方式一
        export{
            flag,sum
        }
        //导出方式二
        let name="why"
        let age=19
        export {name,age}

        //导出函数和类
        export function mulfun(num1,num2){
                return num1+num2
        }
        export class Paopao{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            eat(){
                console.log("love fruit")
            }
        }

        //export default前面的导出是什么名字导入就是什么名字，这个可以在导入时再自己命名
        const fruit="banana";
        export default fruit;//同一个模块只能有一个default

        import fff from "./模块化a.js";