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

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

然后鼠标点击一个内容：
在这里插入图片描述
<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,就必须接收indexvar 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>