vue组件替换node_modules

一、首先我们要知道什么时slot？

1、slot（插槽） 是vue提出的一个概念，插槽用于决定需要携带的内容，可以指定插入的位置。

2、插槽的显示的内容由父组件去决定，显示的位置由子组件进行控制

3、通俗的理解，插槽就是一个“占位置”，在子组件中占好了位置后，内容由父组件决定。

二、slot的简单格式与类型呢

上面提到了使用插槽父子组件搭配着用，具体怎么用？格式怎么写？这里介绍我使用的一种情况。（小白一个）

1、slot单插槽与创建格式

子组件（创建一个.vue的文件）

我这里的插槽中携带了默认值

<template>
    <div class="son">
      <p style="color:red">这是子组件的内容</p>
      <!-- 这里是父组件中插入的内容 -->
      
      <slot>默认显示的值</slot>
   
    </div>
</template>
<script>
export default {
    name: "Son",
 
}
</script>

<style lang="scss" scoped>

</style>

父组件：

<template>
  <div>
   <p>这里是父组件的内容</p>
   <!-- 先去导入子组件，然后去使用 -->
   <Son>
     <!-- 这里的内容就是父组件向子组件传递的内容，不传递的话就显示默认的值 -->
   </Son>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
  name: 'Home',
  components: {
   Son
   
  },

}
</script>

效果图：

上面的效果图父组件并没有插入值，使用的是子组件中默认的值，下面这种情况，当父组件插入值的时候，会覆盖子组件插槽中的默认值。

父组件：

<template>
  <div>
   <p>这里是父组件的内容</p>
   <!-- 先去导入子组件，然后去使用 -->
   <Son>
     <p style="color:blue">这是父组件插入的值</p>
   </Son>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
  name: 'Home',
  components: {
   Son
   
  },

}
</script>

效果图：

2、具名插槽：子组件中有多个插槽，通过指定名称方式实现一 一对应。

子组件：

<template>
    <div class="son">
      <p style="color:red">这是子组件的内容</p>
      <!-- 这里是父组件中插入的内容 -->
      <slot name="header"></slot>
      <slot>默认显示的值</slot>
      <slot name="footer"></slot>
   
    </div>
</template>
<script>
export default {
    name: "Son",
 
}
</script>

<style lang="scss" scoped>

</style>

父组件：

<template>
  <div>
   <p>这里是父组件的内容</p>
   <!-- 先去导入子组件，然后去使用 -->
   <Son>
     <div slot="header">
       这是header部分
     </div>
     <p style="color:blue">这是父组件插入的值</p>
     <div slot="footer">
       这是footer部分
     </div>
   </Son>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
  name: 'Home',
  components: {
   Son
   
  },

}
</script>

效果图：

这里具名插槽的使用方式在VUE.JS官方文档中已经被废除了，但是还可以继续使用，也可以用新的方法v-slot（缩写#）去写，但是需要写在template中，具体可查看官方文档

3、作用域插槽

这里直接举两个列子

列子一:

子组件：

<template>
    <div class="son">
        
      <slot :data="user"></slot>
   
    </div>
</template>
<script>
export default {
    name: "Son",
    data(){
        return{
            user:[
                {name:"tom",age:'18',id:1},
                {name:"tom1",age:'19',id:2},
                {name:"tom2",age:'20',id:3},
            ]
        }
    }
 
}
</script>

<style lang="scss" scoped>

</style>

父组件：

<template>
  <div>

   <!-- 先去导入子组件，然后去使用 -->
   <Son>
     <template slot-scope="user">
           <div v-for="(item,index) in user.data" :key="item.id">
             {{item}}
           </div>
     </template>

   </Son>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
  name: 'Home',
  components: {
   Son
   
  },

}
</script>

效果图：

列子二：

获取到表格中一行内的数据

<template>
    <div class="body">
      <Son>    
        <div class="center">
        <el-table
      :data=" tableData"
      border
      style="width: 540px">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        
        label="操作"
        width="180">
          <template slot-scope="user">
            <el-button @click="hand1(user.row)" type="primary">点击获取</el-button>
          </template>
      </el-table-column>
    </el-table>
      </div> 
      </Son>
    </div>
  </template>

  <script>
  // @ is an alias to /src
  import Son from '@/components/son.vue'

  export default {
    name: 'Home',
    components:{
      Son
  
    },
    data(){
      return{
        tableData:[
      {name:"tom",age:'18',id:1},
      {name:"tom1",age:'19',id:2},
      {name:"tom2",age:'20',id:3},   
        ]
      }
    },
    methods:{
      hand1(e){
        console.log(e)
      }
    }
  }
  </script>

效果图：

点击第一个