Vue组件基础

1. 组件注册

组件需要注册后才可以使用。组件有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。

此外，使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。

<!-- 组件注册 -->
<body>
    <div id="app">
        <global-component></global-component>
        <global-component></global-component>
        <global-component></global-component>
        <part-component></part-component>
        <part-component></part-component>
        <part-component></part-component>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //全局注册组件
        Vue.component('global-component',{
            template: '<div>这是全局组件的内容</div>'
        });

        var partComponent = {
            template: '<div>这是局部组件的内容</div>'
        }

        var app = new Vue({
            el: '#app',
            //局部注册组件
            components: {
                'part-component': partComponent
            }
        })
    </script>
</body>

上述代码中的template是DOM结构必须被包含的一个元素，并且其中如果不包含<div></div>，组件是无法被渲染的。

执行结果

Vue组件的模板在某些情况下会受到HTML的限制，比如<table>内规定只允许时<tr>、<td>、<th>这些表格元素，所以在 <table>内直接使用组件是无效的。这种情况下，需要使用is属性来挂载组件：

<table>
    <!-- tbody在渲染时，会被替换为组件中的内容 -->
    <tbody is="global-component"></tbody>
</table>

除了template选项外，组件中还可以使用如data，computed，methods等，但使用data时，必须为函数，然后将数据return出去：

<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //全局注册组件
        Vue.component('my-component',{
            template: '<div>{{message}}</div>',
            data: function() {
                return {
                    message: '组件内容'
                }
            }
        });

        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

2. props传递数据

在组件中，使用选项props声明来自父组件的数据：

<!-- props声明来自父组件的参数 -->
<body>
    <div id="app">
        <my-component message="来自父组件的数据"></my-component>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //全局注册组件
        Vue.component('my-component',{
            template: '<div>{{message}}</div>',
            props: ['message'], //props可以是数组或对象
        });

        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

props中声明的数据与组件data函数中return的数据主要区别在于，props来自与其父组件，而data中的是组件自己的数据，作用域组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。

有时候，传递的数据不是写死的，而是来自于父组件的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件：

<!-- props动态参数 -->
<body>
    <div id="app">
        <input type="text" v-model="parentMessage">
        <my-component :message="parentMessage"></my-component>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //全局注册组件
        Vue.component('my-component',{
            template: '<div>{{message}}</div>',
            props: ['message'], //props可以是数组或对象
        });

        var app = new Vue({
            el: '#app',
            data: {
                parentMessage: "",
            }
        })
    </script>
</body>

上述代码中如果<my-component :message="parentMessage"></my-component>这一行不适用v-bind的形式，即：<my-component message="parentMessage"></my-component>，则执行结果如下：

非v-bind执行结果

而使用v-bind的结果如下：

v-bind执行结果

可见，如果不适用v-bind，则传递的仅仅是固定字符串。

3. props数据验证

可以应用以下选项对数据进行验证：

type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。
default: any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator: Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。

参考

《Vue.js实战》