VUE.js学习笔记--VUE组件

创建组件

     
     提交
     

          
{{item}}
     
            

我们可以将

标签抽取出来作为组件：

    
    提交
    

        
        
    

Js代码：

Vue.component('zujian',{
    props:['content'],
    template:'
{{content}}
'
})

Props接受由html页面传递过来的参数

父组件(id为app的

)可以使用props 把数据传给子组件（用component定义的）。
Template为代码模板，在html页面引用组件，组件运行时将模板写入页面。
需要注意的是组件是可复用的 Vue 实例，且带有一个名字，例子中组件的名字就是

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。
组件分为全局注册和局部注册。
全局注册：上面的例子就是全局注册啦，定义好后在全局范围内都可以使用这个组件
局部注册：同理所谓局部注册就是只有在局部才能使用的，注册方法如下：

let zujian = {
    props:['content'],
    template:'
{{content}}
'
}

如上所定义，就是一个局部组件，如果要使用它就必须要有一个使用范围，就是在一个vue实例中调用它，否则html无法访问这个组件，需要在vue实例中使用components声明这个组件

let Test = new Vue({
    el:'#app',
    data:{
        inputValue:'hello',
        list:[]
    },
    methods:{
        handleSubmit: function() {
            this.list.push(this.inputValue);
            this.inputValue=''
        }
    },
    components:{
        zujian:zujian
    }
})

删除组件

组件模板有添加那相应的就应该有删除功能，那么如何将添加的组件删除掉呢
我们需要绑定一个删除事件：

Vue.component('zujian',{
    props:['content','index'],
    template:'
{{content}}
',
    methods:{
        oneTick: function(){
            this.$emit('delete',this.index) //触发父组件的自定义事件
        }
    }
})

我们将添加的模板增加一个点击事件，当我们点击添加的li时触发点击click事件，然后我们在点击事件触发的function()里创建一个delete自定义事件，使用$emit来传递给父组件（即id为app的

）
定义：子组件可以使用 $emit 触发父组件的自定义事件。
然后我们可以在父组件监听自定义的delete事件，如果触发则在父组件中对子组件进行删除（因为删除的

标签是和父组件中的list绑定的）:
Html：

    
    提交
    

        
    

Js：

let Test = new Vue({
    el:'#app',
    data:{
        inputValue:'hello',
        list:[]
    },
    methods:{
        handleSubmit: function() {
            this.list.push(this.inputValue);
            this.inputValue=''
        },
        oneTick: function(index){
            this.list.splice(index,1) //删除下标为index的一个数据
        }
    }
})