Vue.js组件基础知识

1.TodoList的基本编写与实现结果

   
   
   


  

    

        
        提交
    
    

        
{{item}}
    
  
  

TodoList预览展示

2.定义组件
（1）定义全局组件

  Vue.component('todo-item', {
        template: '
item
'
    })

使用方式：

（2）定义局部组件

        var TodoItem = {
        template: '
item
'
    }

定义局部组件无法直接使用，需要对组件进行注册

new Vue({
        el: "#root",
        components:{
            'todo-item':TodoItem
        }
    })

3.向组件中传递参数
（1）在父组件中定义需要传递的参数

（2）创建全局组件，使用props接收传入的参数，即可使用传递的参数

 Vue.component('todo-item', {
        //接收传入的content属性，在创建组件时进行接收,通过props
        props:['content'],
        //使用传入的content属性，此时content属性可用
        template: '
{{content}}
'
  })

4.组件与实例之间的关系
vue中的每个组件都是一个vue的实例，每一个vue的实例都是以一个vue组件
5.TodoList删除功能的实现
重点：
父组件通过属性的形式向字组件传递数据
子组件通过发布与父组件相同的事件传递数据
(1)父组件定义需要传递给子组件的属性 index

(2)子组件设置click时间，发布delete事件给父组件

  Vue.component('todo-item', {
        //接收传入的content属性，在创建组件时进行接收,通过props
        props:['content','index'],
        //使用传入的content属性，此时content属性可用
        //设置子组件的点击事件click
        template: '
{{content}}
',
        methods:{
            // 子组件内部通过$emit 发布delete属性
            handleClick:function () {
                this.$emit('delete',this.index)
            }
        }
    })

（3）在父组件中给与子组件相同的事件绑定方法

（4）编写绑定的方法

 handleDelete:function (index) {
                this.list.splice(index,1)
  }

（5）完整代码

  
  
  


  

      

        
        提交