Vue中插槽slot的使用和定义是怎样的-群英

上一篇：J中如何获取焦点，及判断是否获取焦点的方法是什么下一篇：用JS写一个简单计算器怎样做，代码是什么

今天就跟大家聊聊有关“Vue中插槽slot的使用和定义是怎样的”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“Vue中插槽slot的使用和定义是怎样的”文章能对大家有帮助。

如何定义和使用：

在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下放置，为了方便使用，一般都会都插槽slot指定一个name属性值，当要使用该插槽时，只需要在要使用的标签内添加slot=‘插槽名字',就可以将指定的标签放到指定的插槽内，插槽内可以是任意内容。

举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>slot插槽练习</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>父组件</h2>

            <cpn>

                <!-- 将一个元素添加到指定得插槽位置 -->

                <button slot="left">按钮</button>

                <input type="text" slot="right" placeholder="这是输入框..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>子组件</h2>

            <!-- 在子组件中定义三个插槽，插槽内得值为默认值 -->

            <slot name="left">左</slot>

            <slot name="mediate">中</slot>

            <slot name="right">右</slot>

        </div>

    </template>

    <script>

        new Vue({

            el:'#app',

            components:{

                cpn:{

                    template:'#cpn',

                }

            }

        })

    </script>

</body>

</html>

效果如图：

分析:

在上面实例中，子组件中定义了三个插槽，并给了具体的name属性值，在父组件调用子组件中，子组件内给name为left的插槽位置放置了一个按钮，将并将一个输入框放置到name为right的插槽。从中我们可以发现，通过使用插槽，可以使组件有更多的扩展，插槽内的内容可以是任意内容，定义插槽，相当于提前给组件挖好一个坑，等后面用到的时候再调用。

以上就是关于“Vue中插槽slot的使用和定义是怎样的”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。