VUE（六）：插槽的基本使用

最新推荐文章于 2024-08-30 19:24:15 发布

算云烟

最新推荐文章于 2024-08-30 19:24:15 发布

阅读量417

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/109529315

版权

本文详细介绍了Vue中的插槽使用，包括基本使用、具名插槽和作用域插槽。通过插槽，父组件可以在子组件中插入自定义内容。具名插槽用于区分多个插槽，而作用域插槽则允许父组件访问并操作子组件的数据。在Vue 3.0中，slot-scope已被废弃，需采用新的语法进行作用域插槽的处理。

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

通俗易懂的讲，slot具有占位的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个位置里面
假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？默认情况下是不会显示的，那么我执意要加DOM元素

到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面这行不会显示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({
      
      el: '#app',  
      components: {
      
         children: {
       
         template: "<h1>我是子组件</h1>"  
       }  
     }  
  });  
</script>

1.插槽的基本使用

在需要占位的地方声明一个slot即可，然后父组件引用子组件时可以传递任意标签，slot将会替换掉这些标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽的基本使用</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <template id="slottmp">
        <div>
            <p>{
    {content}}</p>
            <slot></slot>
        </div>
    </template>

    <div id="app">
        <slottmp>
            <button>放置了一个按钮</button>
        </slottmp>