浅析Vue单文件组件与非单文件组件使用方法

单文件组件：一个文件中只包含一个组件，后缀为.vue（常用）

<template>
        <!-- html部分 -->
        <div>
                <p class="title">{{name}}</p>
        </div>
</template>
<script>
        // js部分
        export default {
                data() {
                        return {
                                title: '这是标题'
                        }
                }
        }
</script>
<style>
        /*css部分*/
        .title {
                font-size: 24px;
                color: orange;
        }
</style>

非单文件组件：一个文件中包含有多个组件，后缀为.html

在非单文件组件中“定义、注册、使用”组件

【下例中将header-com注册为局部组件、footer-com注册为全局组件】

<div >
        <!-- 使用局部组件 -->
        <header-com></header-com>
        <!-- 使用全局组件 -->
        <footer-com></footer-com>
</div>

// 定义组件
const header = Vue.extend({
        template: `
                <div >
                        {{title}}
                </div>
        `,
        data() {
                return {
                        title: '这是标题'
                }
        }
});
// 定义组件
const footer = Vue.extend({
        template: `
                <div >
                        {{title}}
                </div>
        `,
        data() {
                return {
                        title: '这是底部'
                }
        }
});
// 注册全局组件
Vue.component('footer-com', footer);
new Vue({
        el: '#root',
        // 注册局部组件
        components: {
                'header-com': header
        }
});

注意事项

① 组件中不能添加el配置项，只需在根vm中配置，因为所有的组件最终都被一个vm管理（vue只有一个老大）

② 组件中使用name配置项修改组件在开发者工具中展示的名字

③ 组件实际是一个VueComponent构造函数，在每次使用组件的时候都会实例化一个组件对象。

④ 重要的内置关系：VueComponent.prototype.proto === Vue.prototype，目的是让组件能访问到根vm上的属性和方法。

原文地址：https://blog.csdn.net/wytccc/article/details/128355640