Vue插槽与删除按钮

Posted 2021-06-17 shui~

    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items>
         </todo>
    </div>
    <script type="text/javascript">
        //定义组件todo是组件名称
        Vue.component("todo", {
            template: \' <div><slot name=\\\'todo-title\\\'></slot><ul><slot name=\\\'todo-items\\\'></slot></ul></div>\'//模板
        });
        Vue.component("todo-title",{
            props: [\'title\'],
            template: \'<div>{{title}}</div>\'
        });
        Vue.component("todo-items",{
            props: [\'index\', \'item\'],
            template: "<li>{{index}}---{{item}}<button @click=\'remove\'>删除</button></li>",
            methods:{
                remove: function () {
                    this.$emit("remove") 第一步
                }
            }
        })
        var vue = new Vue({
            el: "#app",
            data: {
               title: \'标题！\',
               items: ["迪丽热巴", "杨幂", "刘亦菲"]
            } ,
            methods: {
                removeItems: function (index) {
                    this.items.splice(index, 1) 第二步
                }            
            }
        })
    </script>

插槽的核心内涵就是，只不过slot是插槽标识而已。

<div id="todo">
        <div id="todo-title">
            标题
        </div>
        <ul id="todo-items">
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
    </div>

删除总结：首先在Vue.component定义组件里面是不能直接调取 var vue = new Vue 里的方法的，必须要间接的调取数据。

                  通过第一步的方法调取到第二步的方法。

                  注意1：在自定义组件里要先绑定  v-on:remove="removeItems"  第一步的 remove 方法 然后到第二步 removeItems

                              方法，因为只有这样  <button @click=\'remove\'>删除</button> 删除按钮里绑定的 remove 事件才能在自定义组件里                             

                              找到。总之就是先写 remove 方法，然后再 button 里绑定该方法，我们为了能够在自定义组件里响应该方法，需要

                              进行 v-on:remove 的一个绑定，这一就能够找到 removeItems 第二步中的方法。

                  注意2：在removeItems 里需要传一个参数 index 就是编号（removeItems: function (index)）而该参数在

                                v-for="(item,index) in items" 已经自动的传入了，所以在 v-on:remove="removeItems" 不用在传值了。