vue slot 插槽详解

最新推荐文章于 2024-05-28 17:25:55 发布

A-Select °

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45959504/article/details/109668500

版权

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签
插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容
　　一、默认插槽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>默认插槽</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {
   {
   message}}
            <tode-item>这是一个默认插槽<h3>这是标签h3</h3></tode-item>
        </div>
    </body>
    <script type="text/javascript">
　　　　//子组件
        Vue.component('tode-item', {
   
            template: `<div>
                <slot>这里面是slot的默认值</slot>//当引入组件的地方没有写插槽内容，将显示子组件插槽中默认的值，如果没有默认值也没用写插槽内容，则插槽内容为空。
            </div>`
        });
        var app = new Vue({
   
            el: "#app",
            data: {
   
                message: 'hello world!'
            }
        });
    </script>
</html>

二、具名插槽: 子组件中有多个插槽，通过给插槽指定名称方式实现一一对应。

<!DOCTYPE html>
<html>
    <head>

最低0.47元/天解锁文章

A-Select °

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue slot 插槽详解

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容　　一、默认插槽<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <
复制链接

扫一扫