Vue中插槽的使用步骤，及个人总结与感悟！！

1.首先需要在父组件中引入子组件，如下所示：

import CategoryView from "@/views/CategoryView";

2.注册组件：

 export default {
        name: "ProfileView",
        components: {CategoryView},//注册组件
        data() {
            return {
                foods:['火锅','烧烤','龙虾','牛排'],
                games:['王者','穿越','吃鸡','黑三'],
                films:['大秦','速度','电影','抖音']
            }
        }
    }

3.使用组件

  //使用组件
           

4.在父组件中自定义属性：

 5.在子组件中通过props 进行接收props是一个对象，可以接收多个自定义属性传递过来的数据：

 props: {
            listdata: {
                type: Array,
                require: true,
                default: () =>[]
            },
            title: {
                type: String,
                require: true,
                default: '美食'
            }
        },

6.在子组件中通过,指定在父组件中使用的，子组件标签体内容的出口，例如：

 具名插槽：

  父组件中:

     
     更多更多

************************************************************



  

 在子组件中通过name属性指定标签体内容要展示的区域：

作用域插槽：

作用域插槽可以接收子组件传递过来的数据，如下：

 //通过自定义属性，将listdata传递到父组件
//在父组件中通过slot-scope，和scope，进行接收，注意的是slot-scope=”这里和你在slot标签定义的属性名要一致“

最后：本人认为这和组件传值没什么区别，我们可以在父组件中传递值到子组件，然后可以在子组件中做一些封装 ，然后将封装好的数据返回给父组件，父组件直接使用，这个插槽在AntDesign里面的table就是通过将数据传递给子组件然后在父组件通过slot-scope="recod",取得当前行的数据，直接对table的每一行数据进行操作！，大概是这么理解的！