Vue组件注册

发表于 分类于 阅读次数： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

全局组件注册

写法一
<!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="../lib/vue.js"></script>
</head>
<body>
    <!-- 第三步：使用组件 -->
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        // 第一步：使用extend定义组件
        var myHeader = Vue.extend({
            template: '<h1>header</h1>'
        });
        // 第二步：使用Vue.component注册组件
        // 格式：Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component('my-component', myHeader);

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

在定义和注册组件时需要注意的地方：（定义全局组件和私有组件都要注意）

1. 第一步定义模板对象时，在最外层需要用一个根元素包裹起来。

2. 在第二步注册组件时，组件的名称不要使用驼峰的命名规则，应该使用两个单词之间用 - 连接的命名规则。

写法二

定义、注册组件一步到位

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<div><h1>header1</h1><h2>header2</h2></div>'
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
写法三（推荐）

和写法二类似，只是把定义模板的代码分离出来，方便书写 html 代码

<body>
    <!-- 第一步：定义模板 -->
    <template id="myHeader">
        <div>
            <h1>header1</h1>
            <h2>header2</h2>
        </div>
    </template>
	<!-- 第三步：使用组件 -->
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        // 第二步：定义、注册组件
        Vue.component('my-component', {
            template: '#myHeader'
        });

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

私有组件注册

我们还可以在 Vue 实例中定义私有组件，这样的话，就只有在当前 Vue 实例中可以使用这个组件。

写法一
<!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="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {},
            components: {
                'my-component': {
                    template: '<div><h2>我是私有组件</h2></div>'
                }
            }
        });
    </script>
</body>
</html>
写法二

写法二的写法就是把定义模板的步骤分离出来了。

<body>
    <template id="myHeader">
        <div>
            <h2>我是私有组件</h2>
        </div>
    </template>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {},
            components: {
                'my-component': {
                    template: '#myHeader'
                }
            }
        });
    </script>
</body>