Vue之创建组件

一. 创建全局组件的方法

1. 分为两步，首先使用 Vue.extend() 创建模板对象，然后使用Vue.component(‘组件的名称’， 组件的模板对象) 创建组件。

代码格式为：

//方法一：
        //第一步：创建模板对象
        var component1 = Vue.extend({
            template: '<h3>这是用Vue.extend 创建的组件</h3>'
        });
        //第二步：使用Vue.component('组件的名称', 组件的模板对象)
        Vue.component('myComponent1', component1);
        
        //当然也可将两步合一：
        Vue.component('myComponent1', Vue.extend({
            template: '<h3>这是用Vue.extend 创建的组件</h3>'
        })
        );

2. 直接使用Vue.components() 创建组件。

代码格式为：

//方法二：
        Vue.component('myComponent2', {
            template: '<h3>这是直接使用Vue.components创建出来的组件</h3>'
        });

3.基于第二种方法，在控制显示的div元素外，使用template模板直接定义组件的template模板结构。

代码格式为：

<template id="template2">
        <h1>这是外部定义的私有组件</h1>
</template>

//方法三：在被控制的div元素外，直接定义组件的template模板结构
        Vue.component('myComponent3', {
            template: '#template'
        });

二. 创建私有组件

在Vue实例内，使用Vue含有的components属性创建。
代码格式：

	<div id="app2">
        <login></login>
        <login2></login2>
    </div>
	<template id="template2">
        <h1>这是外部定义的私有组件</h1>
    </template>

 //定义私有组件
        var vm2 = new Vue({
            el: '#app2',
            data: {},
            methods: {},
            components: {
                login: {
                    template: '<h1>这是私有的组件login</h1>'
                },
                login2: {
                    template: '#template2'
                }
            }
        })

三. 组件的调用

直接将组件名称作为一个标签写入。
例如：对 二 中的私有组件login调用，直接在html中使用<login></login>
注意： 若遇到驼峰命名法的组件名称，在调用组件，将其标签化时，必须将名称中的所有大写字母变成小写，并在改写后的字母前使用“-”连接（可以视作单词之间的连接符号）。
例如：组件名称为 myComponent1 ，则标签化后为<my-component1></my-component1>。这里的大写字母C化为小写，前面加了“-”连接。

四. 完整代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component1></my-component1>
        <my-component2></my-component2>
        <my-component3></my-component3>
    </div>

    <div id="app2">
        <login></login>
        <login2></login2>
    </div>

    <template id="template">
        <div>
            <h1>这是template元素在外部定义的组件结构，推荐使用</h1>
        </div>
    </template>

    <template id="template2">
        <h1>这是外部定义的私有组件</h1>
    </template>

    <script>
        //创建全局的Vue组件
        //方法一：
        //第一步：创建模板对象
        var component1 = Vue.extend({
            template: '<h3>这是用Vue.extend 创建的组件</h3>'
        });
        //第二步：使用Vue.component('组件的名称', 组件的模板对象)
        Vue.component('myComponent1', component1);

        //方法二：
        Vue.component('myComponent2', {
            template: '<h3>这是直接使用Vue.components创建出来的组件</h3>'
        });

        //方法三：在被控制的div元素外，直接定义组件的template模板结构
        Vue.component('myComponent3', {
            template: '#template'
        });


        var vm1 = new Vue({
            el: '#app',
            data: {

            }
        });

        //定义私有组件
        var vm2 = new Vue({
            el: '#app2',
            data: {},
            methods: {},
            components: {
                login: {
                    template: '<h1>这是私有的组件login</h1>'
                },
                login2: {
                    template: '#template2'
                }
            }
        })
    </script>
</body>

</html>