Vue中创建全局组件的三种方式

最新推荐文章于 2024-07-15 16:14:03 发布

键盘的打工仔

最新推荐文章于 2024-07-15 16:14:03 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105440732

版权

方式一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建组件方式1</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <!--驼峰命名 -->
    <!--<my-com1></my-com1>-->

    <!-- 全小写命名 -->
    <mycom1></mycom1>
</div>
</body>
<script>
    //1.创建组件
    var com1 = Vue.extend({
        // 将来组件要展示的内容
       template: '<h2>这是Vue.extend创建的组件</h2>'
    });
    //2.注册组件
    //注意: 如果使用的是驼峰命名规则注册组件,那么在使用的要把大写字母改成小写,并用 - 连接
    //      如果使用的是全小写注册的组件,则使用的时候直接写注册时候的名称即可
    // Vue.component('myCom1', com1);
    Vue.component('mycom1', com1);
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>
</html>

方式二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建组件方式2</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <mycom></mycom>
</div>
</body>
<script>
    //创建组件
    Vue.component('mycom', {
        //注意: template 所指向的内容只能包含一个根节点元素
        template: `
    <div>
        <h3>这是一个组件</h3><span>jjjjjjj</span>
    </div>`
    })
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>
</html>

方式三:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建组件方式3</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <mycom></mycom>
</div>

<!-- 在Vue控制区域的外部 创建一个组件-->
<template id="tmpl">
    <div>
        <h2>这是通过外部引用的方式创建的组件</h2>
        <span>学到了吧!!!</span>
    </div>
</template>

</body>
<script>
    Vue.component('mycom', {
        template: '#tmpl'
    })
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>
</html>