创建组件

<div id="app">
     <input v-model='inputValue'/>
     <button @click='handleSubmit'>提交</button>
     <ul>
          <li v-for='(item,index) of list' :key='index'>{{item}}</li>
     </ul>            
</div>

我们可以将<li></li>标签抽取出来作为组件：

<div id="app">
    <input v-model='inputValue'/>
    <button @click='handleSubmit'>提交</button>
    <ul>
        <zujian v-for='(item,index) of list'
                :key='index' 
                :content='item'>
        </zujian>
    </ul>
</div>

Js代码：

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

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

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

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

let zujian = {
    props:['content'],
    template:'<li>{{content}}</li>'
}

如上所定义，就是一个局部组件，如果要使用它就必须要有一个使用范围，就是在一个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:'<li @click="oneTick">{{content}}</li>',
    methods:{
        oneTick: function(){
            this.$emit('delete',this.index) //触发父组件的自定义事件
        }
    }
})

我们将添加的模板增加一个点击事件，当我们点击添加的li时触发点击click事件，然后我们在点击事件触发的function()里创建一个delete自定义事件，使用$emit来传递给父组件（即id为app的<div>）
定义：子组件可以使用 $emit 触发父组件的自定义事件。
然后我们可以在父组件监听自定义的delete事件，如果触发则在父组件中对子组件进行删除（因为删除的<li>标签是和父组件中的list绑定的）:
Html：

<div id="app">
    <input v-model='inputValue'/>
    <button @click='handleSubmit'>提交</button>
    <ul>
        <zujian v-for='(item,index) of list' 
                :key='index' :content='item' :index='index'
                @delete='oneTick' //监控delete事件
        ></zujian>
    </ul>
</div>

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的一个数据
        }
    }
})