第12节 组件基础

组件是可复用的 Vue 实例，开发过程中，把重复功能封装成组件，来达到快速、便捷开发项目。

<div id="app">
    <button-counter title="title1 : " @clicknow="clicknow">
        <h2>hi...h2</h2>
    </button-counter>
    <button-counter title="title2 : "></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter', {
    props: ['title'],//通过props向子组件传递数据
    data: function () {
        return {
          count: 0
        }
    },
    template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
    methods:{
        clickfun : function () {
            this.count ++;
            this.$emit('clicknow', this.count);//子组件传参给父组件函数名
        }
    }
})
var vm = new Vue({
    el : "#app",
    data : {
    },
    methods:{
        clicknow : function (e) {//控制台输出子组件传递过来的数据
            console.log(e);
        }
    }
});
</script>