单个插槽及具名插槽理解

来源：互联网发布：梭哈游戏c 算法实现编辑：程序博客网时间：2024/05/22 02:08

插槽就是动态交互父子组件之间的数据的机器臂，二话不说上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script type="text/javascript" src="vue.js"></script></head><body>    <div id="app">        <div>            <h1>我是你爸比</h1>            <my-component>                <p>哈哈哈哈，我是爸比的金库 </p>                <p>(●ˇ∀ˇ●)，爸比爱你</p>            </my-component>        </div>    </div><script>    Vue.component("my-component",{        template:"\                <div>\                <h2>我是爸比的傻儿子</h2>\                <slot>\                    儿子出生的时候嘴巴里含着玉，假如爸比是丐帮帮主此玉就会灵光一现\                </slot>\                </div>\        ",    });    new Vue({        el:"#app"    })</script></body></html>

理解：

1.假如子组件没有slot插槽，父组件的内容将被会丢弃

2.假如子组件只有一个插槽，并且这个slot没有属性，那么父组件的所有包含在自定义组件标签里面的内容将插入到slot所在的位置，slot标签消失

3.假如自定义组件标签里面没有内容，就会显示slot里面的备用内容

vUv

~~~~~~~略略略~~~~~~~~~

具名插槽demo：

<div id="app">        <h1>商场里面的商品</h1>        <girl>            <li slot='shoes'>红色的鞋\绿色的鞋\不红不绿的鞋</li>            <li slot='skits'>冬天穿的裙\夏天穿的裙\睡觉穿的裙</li>            <li slot='makeup'>眼睛用的霜\每个季节不同的口红\白天黑夜分开的水</li>            <li>总之当一个漂亮的美少女很麻烦，所以各位好好疼爱手心的那个美女，不说了我是默认的心声因为我没有slot的name名字，找不到name的那个人就要显示我，请大家记住我是没有名字的雷锋，OvO</li>        </girl>           </div>    <script>    Vue.component('girl',{        template:'\        <h2>家里已经放不下~放不下~放不下的小心肝儿</h2>\        <ul>\            <li>\                高跟鞋\平底鞋\登山鞋\坡跟鞋\运动鞋\玛丽珍鞋\如此云云\                <slot name="shoes"></slot>\            </li>\            <li>\                长裙\迷你裙\牛仔裙\连身裙\薄纱裙\如此云云\                <slot name="skits"></slot>\            </li>\            <li>\                口红\粉底\隔离\防晒\腮红\眼影\如此云云\                <slot name="makeup"></slot>\            </li>\            <li>\                <slot></slot>\            </li>\        </ul>\        ',    })    </script>

理解就是每个slot要找到对应自己的name的同类，不能认错了族群，假如从石头里蹦出来的不知道自己name的那位，就会被爱心收容所接纳，假如没有这个机构的话，就不会出现。ok就这样。

哈哈，放学咯

阅读全文

1 0