Vue父子组件传值 v-bind:、this.$emit、 this.list.splice(index,1)、@delete等的使用-CSDN博客

本文链接：https://blog.csdn.net/qq_37767455/article/details/102294549

在这里插入图片描述
点击提交：

然后鼠标点击一个内容：

在这里插入图片描述

<body>
    <!--
       a.父组件向子组件传值：通过v-bind:的形式进行数据的传递(可直接简写为冒号)
                然后子组件 使用props来接收
       b.子组件向父组件传值:
            局部组件TodoItem的li有handleItemClick事件
            this.$emit("delete",this.index):子组件向外触发事件,并携带参数
            父组件中 @delete="handleItemDelete" 监听到删除事件，
            于是调用handleItemDelete:function(index)方法            
    -->
    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button v-on:click="handleBtnClick">提交</button>
        </div>
        <ul>
            <!--<li v-for="item in list">{{item}}</li>-->

              <!--父组件(最外层的Vue实例)中data里面的list 传给子组件
                        子组件遍历list,得到item，然后给了子组件的一个变量content
                   创建这个子组件todo-item的同时，也监听到子组件的delete事件
                    index指的是是第几个todo-item
                    向子组件传值：不仅传content,还把对应的下标传下去
            -->
            <todo-item v-bind:content="item"
                       v-bind:index="index"
                       v-for="(item,index) in list"
                       @delete="handleItemDelete">  <!--父组件监听delete事件 去执行handleItemDelete方法-->

            </todo-item>
        </ul>

    </div>

    <script>

        //2.局部组件   同样，子组件要是想用index,就必须接收index
        var TodoItem ={
            props:['content','index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function () {//子组件一旦被点击 不但触发delete事件，同时还把this.index作为参数 带给父组件
                    this.$emit("delete",this.index); //子组件向外触发事件  index传给父组件
                }
            }
        }

        var app=new Vue({
            el:'#root',

            //2.注册局部组件 到 Vue实例中
            components:{
              TodoItem:TodoItem
            },

            data:{
               list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function () {
                    this.list.push(this.inputValue)
                    this.inputValue='';
                },

                handleItemDelete:function(index){
                    alert(index);
                    this.list.splice(index,1);//从哪个位置删除1个元素
                }
            }
        });

    </script>
</body>