Vue-组件1 创建全局组件方式_app.vue只创建唯一组件-优快云博客

本文介绍了在Vue中创建全局组件的三种方式：1. 使用Vue.extend结合Vue.component，2. 直接使用Vue.component，3. 利用template元素配合Vue.component。强调了组件名称转换规则和必须有唯一根元素的要求。

Vue-组件1 创建全局组件方式

注意：

驼峰命名在调用的时候在每个大写字母（除了首字母）前面加 -，大写字母可改成小写来调用
小写命名直接调用
组件必须要有唯一了根元素

创建方式1 [Vue.extend+Vue.component]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        3.应用组件-->
<!--        注意：-->
<!--        驼峰命名 在调用的时候在每个大写字母（除了首字母）前面加 -，大写字母可改成小写来调用-->
<!--        小写命名直接调用-->
        <my-Com-C></my-Com-C>
        <mycom></mycom>
    </div>
<script>
    //1.通过 Vue.extend 创建模板
    var com1 = Vue.extend({
    	// 注意：组件必须有唯一的根元素
        template: '<h1>通过 Vue.extend+Vue.componnet 创建模板com1</h1>'
    })
    var com2 = Vue.extend({
        template: '<h1>通过 Vue.extend+Vue.componnet 创建模板com2</h1>'
    })
    //2.再通过 component 创建组件
    Vue.component('myComC', com1)
    Vue.component('mycom', com2)

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

创建方式2 [Vue.component]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
    </div>
<script>
    // 1.通过 Vue.comopnent 创建组件
    Vue.component('com1', {
    	// 注意：组件必须有唯一的根元素
        template: '<div><h1>通过 Vue.comopnent 创建组件</h1><span>123</span></div>'
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>

创建方式3 [template元素+Vue.component]

注意：

template元素写在外面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
    </div>

<!--    在外面写组件模板-->
<!--    Vue 提供的 template 元素, 创建组件时，通过元素id来调用该模板-->
    <template id="tmp1">
        <div>
            <h1>Vue 提供的 template 元素, 创建组件时，通过元素id来调用该模板</h1>
        </div>
    </template>
<script>
    // 2.创建全局组件
    Vue.component('com1', {
        template: '#tmp1'
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>