码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件的原始初始化方式以及全局组件与局部组件的区分

时间:2020-02-03 22:27:26      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:const   多个   span   区分   script   com   全局   tle   ons   

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app1">
    <!-- 3:使用组件 -->
    全局组件:
    <cpn></cpn>
</div>
<div id="app2">
    <!-- 3:使用组件 -->
    局部组件:
    <mycpn></mycpn>
</div>
<script>
    /*最原始的组建创建方式
    1:创建组建构造器对象
    */
    const cpnC = Vue.extend({
        template: `<div><div>最原始的组建创建方式</div></div>`,

    })
    /*2:注册全局组件(全局组件,意味着可以在多个Vue的实例下面使用)*/
    Vue.component("cpn",cpnC);

    const app1 = new Vue({
        el: "#app1",
    
    })

    const app2 = new Vue({
        el: "#app2",
        /*2:在vue的实例里面注册组件(局部组件,意味着只能该vue实例使用)*/
        components:{
            mycpn : cpnC
        }
    })

</script>
</body>
</html>

 

vue组件的原始初始化方式以及全局组件与局部组件的区分

标签:const   多个   span   区分   script   com   全局   tle   ons   

原文地址:https://www.cnblogs.com/cl94/p/12257507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!