Vue-slot插槽

vue 中的slot作用

slot (插槽) 是 Vue 的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot 又分三类，默认插槽，具名插槽和作用域插槽

使用与不使用的区别

这是一个简单的 Vue 组件示例代码，不使用插槽：

// 子组件
Vue.component('child-component', {
  template: `
    

      
我是子组件
    
  `
});

// 父组件
new Vue({
  el: '#app',
  template: `
    

      
我是父组件
      
    
  `
});

在这个示例中，子组件内部没有 元素，因此父组件无法在子组件内部插入内容。子组件的内容完全由子组件自身决定。

下面一个简单的 Vue 组件插槽的示例代码，使用 JavaScript 语法：

// 子组件
Vue.component('child-component', {
  template: `
    

      
我是子组件
      这里是默认插槽内容
    
  `
});

// 父组件
new Vue({
  el: '#app',
  template: `
    

      
我是父组件
      这里是父组件插入到子组件插槽的内容
    
  `
});

在这个示例中，子组件内部有一个 元素，用来承载分发内容的出口。父组件在使用子组件时，可以在子组件标签内部插入内容，这些内容会替换子组件内部的 元素。