从零开始学VUE之组件化开发(注册全局组件)

全局组件是通过Vue.component在Vue实例声明之前注册的,可以在全局任意地方调用,只要是属于Vue接管的界面

注册全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--3:使用组件,必须在#app里面-->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>
</body>
<script>
    // 1:创建组件构造器对象
    const cpnC = Vue.extend({
        // 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接
        template: `
            <div>
                <h2>this is cpn</h2>
                <span>this is span!</span>
            </div>
        `
    })

    /**
     * 2:注册组件
     * 第一个参数:使用时的标签名
     *  my-cpn=myCpn 使用时会自动将驼峰转为中横线
     * 第二个参数:要注册的组件
     * 通过Vue.component注册的组件为全局组件,意味着可以在全部的vue实例中调用
     */
    Vue.component('my-cpn',cpnC);

    const vue = new Vue({
        el: '#app',
        data: {}
    })
</script>
</html>

运行效果

 

作者：彼岸舞

时间：2021\06\02

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

posted @ 2021-06-02 14:31  彼岸舞  阅读(122)  评论(0)  编辑  收藏  举报