24.VUE_插槽slot

最新推荐文章于 2024-04-01 09:42:47 发布

橘九。

最新推荐文章于 2024-04-01 09:42:47 发布

阅读量186

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_34400745/article/details/103125846

版权

本文详细介绍了Vue.js中插槽的使用，包括何时使用插槽、插槽的基本内容、具名插槽以及作用域插槽的概念和应用。通过示例代码展示了如何在子组件中定义插槽，以及父组件如何利用插槽传递和控制内容的展示，帮助开发者更好地理解和运用Vue组件的插槽功能。

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

什么时候需要用插槽：

子组件除了展示自身标签外，还要展示一段内容，但是这个内容不是子组件所决定的，而是父组件传递过来的。
按照以前学的内容，从父组件传递给子组件，需要通过属性的形式来传递。
这样是可行的，但是会有一个问题，如果父组件向子组件传值传的比较少，这样做是没问题的；但是当要传的内容很多的时候，代码就会变得很难阅读。
所以当子组件有一部分内容是根据父组件传递过来的DOM进行显示的时候，这时候就可以使用—插槽slot。

当子组件内的部分展示模板是由父组件决定的时候，可以使用插槽，但是插槽显示的位置由子组件自身决定，slot在子组件template中的位置，决定了父组件传过来的显示模板的位置。

一、插槽内容

一句话：插槽内可以是任意内容。

先看一下下面的代码：声明一个slotDemo组件，

如果现在我想在<slotDemo/>内放置一些内容，结果会是怎样？
　　　
slotDemo.vue

<template>
    <div>
        {
   {
   msg}},你好
    </div>
    
</template>

<script>
    export default {
   
        name: "slotDemo",
        data(){
   
            return{
   
                msg:"slotDemo"
            }