Vue 全局注册组件和局部注册组件

Posted 2021-03-13 edwardwzw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 全局注册组件和局部注册组件相关的知识，希望对你有一定的参考价值。

Vue 组件化的思想大大提高了模块的复用性和开发的效率，在使用组件时，一般分为几个步骤，分别是：定义组件、引入组件，注册组件，使用组件。本节主要针对Vue中如何注册组件进行阐述。

下面我们一起来看如何全局注册组件，如何局部注册组件。

技术图片

页面显示结果如下：

技术图片

【说明】：

1. com-one com-two 为全局注册组件， com-three com-four 为局部注册组件；

2. 全局注册组件为 Vue.component()方法；局部注册组件为 components 属性，它的属性值是一个对象；

3. 在用脚手架时，我们更多用到的是在单文件组件中局部注册组件。

[代码]：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test1</title>
</head>
<body>
    <div id="app">
        <com-one></com-one>  <com-two></com-two>
       
        <com-three></com-three>  <com-four></com-four> 
    </div>
</body>
<!-- 定义组件 -->
<template id="comTwo">
    <div>
       <h1>this is com-two</h1>
    </div>
</template>
<template id="comFour">
    <div>
        <h2>this is com-four</h2>
    </div>
</template>
<script src="./vue.js"></script>
<script>
// 全局注册1: 第二个参数中template的属性值为子组件的具体内容(注册时定义组件)
Vue.component(‘com-one‘,{
    template: `<h1>this is com-one</h1>`
})

// 全局注册2: 第二个参数中template的属性值为<template>模板的‘#id‘
// (将子组件的具体内容单独写入<template>中，放到<body>元素之后，<script>元素之前)
Vue.component(‘com-two‘,{
    template: ‘#comTwo‘,
})

let vm = new Vue({
    el: ‘#app‘,
    data: {},
    // 局部注册:(类似于全局注册)
    components: {
        "com-three": {
            template: `<h2>this is com-three</h2>`
        },
        "com-four": {
            template: ‘#comFour‘
        }
    }
})
</script>
</html>

以上是关于Vue 全局注册组件和局部注册组件的主要内容，如果未能解决你的问题，请参考以下文章

Vue中如何注册全局组件和局部组件(详解)