Vue插槽--解决点击整体而不是局部获取id

因为最近在学习vue.js，正好之前遇到一个公司的项目，做一个单一活动页，里面每个产品介绍的样式都是统一的，因为公司项目不方便截图展示，那我就用一个粗糙简略的页面代替一下

假设说我想做如上的效果，然后点击整个蓝色部分可以获取当前id，之前在做的时候尝试着使用了v-for，确实实现了静态页面，稍微写下代码：

 <div id="vm1">
        <p>rabbit</p>
        <div v-for='todo in todos'  :key="todo.id">
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <h1>详细介绍</h1>
        </div>
    </div>

<script>
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

这个的实现很简单，然后就是点击可以获取每个对应的id，想要获取id，第一个想到的方法就是利用组件，利用父子组件data传递的方法，用v-bind绑定当前的id，然后在子组件中获取这个id，那么问题来了，把哪个部分当做组件呢，因为我当时并没有学到插槽，使用的组件都是内容全部用template替换掉，而只有在子组件的部分才能获取id，如果我把整个v-for的部分当做组件，如果是用template整体替换，那确实很费神。所以我就直接将<h1>作为组件部分，

<div id="vm1">
        <p>rabbit</p>
        <div v-for='todo in todos'  :key="todo.id" >
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <temp :id="todo.id"></temp>
        </div>
    </div>

<script>
        Vue.component("temp",{
            props:["id"],
            template:"<h1 @click='pomp()'>详细介绍</h1>" ,
            methods:{
                pomp:function(){
                    alert(this.id);
                }
            }
        })
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

当时时间急，这个问题算是勉强解决了，然后我今天学到<slot>插槽的时候我突然发现，这不就是可以解决我当时问题的方法吗，根据vue官网的文档， 当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

也就是说，在组件里，我原本写在父组件中不想被替换掉的部分，我可以放在子组件里的<slot>里，那么我就可以将整个div，作为一个组件，然后子组件里直接放入一个<slot>插槽，就可以在点击div的时候获取id，并且依然保证v-for的正确执行，还能简化代码。

<div id="vm1">
        <p>rabbit</p>
        <temp v-for='todo in todos'  :key="todo.id" :id="todo.id" >
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <h1>详细介绍</h1>
        </temp>
    </div>

<script>
        Vue.component("temp",{
            props:["id"],
            template:"<div class='bg' @click='pomp()'>" +
            "<slot></slot>" +
            "</div>",
            methods:{
                pomp:function(){
                    alert(this.id);
                }
            }
        })
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

可以在网页中F12查看元素，这样能更直观的看到插槽的效果

可以看到原本是在父组件中的内容，现在全部都放到子组件的div里面，并且将<slot>标签也都替换掉了。

以上就是我学到<slot>插槽的一点点心得体会，vue框架我也是还在学习中，如果有什么不正确的地方还请各位大佬批评指正。

以上。