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

最新推荐文章于 2023-01-11 16:41:13 发布

Leisure Tea

最新推荐文章于 2023-01-11 16:41:13 发布

阅读量106

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103645089

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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>

更新时间：2019-12-21

Leisure Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件1 创建全局组件方式

Vue-56 创建全局组件方式注意：驼峰命名在调用的时候在每个大写字母（除了首字母）前面加 -，大写字母可改成小写来调用小写命名直接调用组件必须要有唯一了根元素创建方式1 [Vue.extend+Vue.component]<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫

专栏目录