给组件绑定原生事件

<item-todo @change="handleClick"></item-todo>  
Vue.component('item-todo', {
    template: '<div @click="handleDiv">hello</div>',
    methods:{   //绑定在Dom元素上的事件为原生事件
        handleDiv:function(){
            this.$emit('change')
        }

    }
})  
var vm= new Vue({
    el: '#app',
    methods:{
        handleClick:function(){
            alert('click')
        }
    }
})

<item-todo @click.native="handleClick"></item-todo> //监听组件的原生事件 .native

动态组件和 v-once

<div id="todo-list-example">
    <child-one v-if="type3 === 'child-one'"></child-one>
    <child-two v-if="type3 === 'child-two'"></child-two>
    <button @click="handleClick">切换</button> //通过 v-if 来切换组件
</div>
<script>
    Vue.component('child-one', {
        template: '<div v-once>child-one</div>'
    })
    Vue.component('child-two', {
        template: '<div v-once>child-two</div>' 
    }) //v-once 指令会将内容放在内存里，能够有效提高静态内容的展示效率
    new Vue({
        el: '#todo-list-example',
        data: {
            type3: 'child-one'
        },
        methods: {
            handleClick: function () { //三元运算符
                this.type3 = this.type3 == 'child-one' ? 'child-two' : 'child-one'
            }
        }
    })
</script>

<div id="todo-list-example">
    <component :is="type3"></component> //会通过 type3 的值，渲染对应命名的子组件
    <button @click="handleClick">切换</button>
</div>
<script>
    Vue.component('child-one', {
        template: '<div>child-one</div>'
    })
    Vue.component('child-two', {
        template: '<div>child-two</div>'
    })
    new Vue({
        el: '#todo-list-example',
        data: {
            type3: 'child-one'
        },
        methods: {
            handleClick: function () {
                this.type3 = this.type3 == 'child-one' ? 'child-two' : 'child-one'
            }
        }
    })
</script>