vue-slot

最新推荐文章于 2023-03-23 16:51:50 发布

Jacky-Liu999

最新推荐文章于 2023-03-23 16:51:50 发布

阅读量170

点赞数

分类专栏： Vue 文章标签： java js

本文链接：https://blog.csdn.net/hotboyboy/article/details/114629571

版权

本文介绍了Vue.js中slot的使用，包括具名slot的使用，强调了具名slot未指定时仅覆盖默认样式。接着讨论了编译作用域，说明父组件和子组件模板的编译范围。最后，详细阐述了作用域插槽的实现，需要在子组件的slot中添加数据属性，并在父组件中通过slot-scope引用并访问这些数据。

摘要由CSDN通过智能技术生成

slot

在这里插入图片描述

<body>
    <div id="app">
        <cpn><p>我是第一</p></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <cpn>
            <p>我是最后一个</p>
            <p>二号和二号</p>
            <button>dddd</button>
        </cpn>
    </div>
    <!-- 子组件template -->
    <template id="cpntemplate">
        <div>
            <p>我是组件</p>
            <!-- slot中设置默认样式 -->
            <slot><button>点我</button></slot>
        </div>
    </template>
    <script>
        // 子组件
        const cpn = {
   
            template:"#cpntemplate",
        }
        //父组件
        var app = new Vue