Vue——自定义组件（原生代码实现）

这里介绍的就是Vue的第三个特点：模块化开发。

实际上，使用了node.js，基本都会具备模块化开发的特点，而Vue代码的形式（Vue的语法），是我们要学习的重点。

本篇的案例未使用脚手架，使用传统方式开发，但是语法一致。

学习主要主要包括这几点：

代码模版（html脚本）
参数设置（调用组件的时候，需要传递进来的参数）
事件回调（案例：我们的组件内部有一些按钮，需要触发父级组件一些事件）

代码模版

通过components进行组件定义，使用template设置代码模版。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app1">
    <view1></view1>
    <view2></view2>
</div>
<div id="app2">
    <view1></view1>
    <!--在这里view不显示-->
    <view2></view2>
</div>
<script>
    // 全局组件
    Vue.component('view1', {
        template: '<h5>组件1</h5>'
    })
    // 局部组件
    var Child = {
        template: '<h4>组件2</h4>'
    }
    // 创建根实例
    new Vue({
        el: '#app1',
        components: {
            // <view2> 将只在父模板可用，只在app1设置局部组件
            'view2': Child
        }
    })
    new Vue({
        el: '#app2',
    })
</script>
</body>
</html>

参数设置

自定义组件的时候，需要告诉别人，调用我们的组件，需要传递什么参数，

使用prop（Property的缩写）为代码模版设置传值参数。

参数可以指定类型，分为String、Number、Boolean、Function、Object、Array，还可以指定是否必传，设置默认值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component :num="1313"></my-component>
</div>

<script>
    new Vue({
        el: '#app',
        components:{
            'my-component': {
                //代码模版
                template:'<div>{{num}}</div>',
                props:{num:{
                    //可以设置多种类型
                    type:[String,Number],
                    // 是否必传
                    required: true,
                    // 默认值
                    default:'empty'
                }}
            }
        }
    })
</script>
</body>
</html>

事件回调

举个例子：就是我们封装的组件，里面有个按钮，别人调用我们组件的时候，写了个点击事件，我们的按钮要想办法触发点击事件。

使用 $on(eventName) 监听事件，当子页面触发父页面的事件的时候，触发1个事件（事件的触发侦听）
使用 $emit(eventName) 触发事件，子页面触发父页面的事件

需要发送事件的模版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="counter-event-example">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
</div>

<script>
    new Vue({
        el: '#counter-event-example',
        components: {
            'button-counter': {
                //定义一个特殊的模版，维护一个内部数据counter，每次点击，counter加1
                //这个时候，如果期望外部侦听到counter的变化，可以使用事件回调，下一个Demo展示如何传递消息
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementHandler: function () {
                        this.counter += 1
                    }
                }
            }
        }
    })
</script>
</body>
</html>

事件回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="counter-event-example">
        <p>{{ total }}</p>
        <!--increment侦听到消息，调用incrementTotal()函数-->
        <button-counter  v-on:increment="incrementTotal"></button-counter>
        <button-counter  v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

<script>
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                //修改total的值
                this.total += 1
            }
        },
        components: {
            'button-counter': {
                //点击的时候调用incrementHandler()函数
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementHandler: function () {
                        this.counter += 1;
                        //对外发送事件，发送给increment侦听器
                        this.$emit('increment')
                    }
                }
            }
        }
    })
</script>
</body>
</html>