vue创建全局组件的三种方式以及注意事项

1.效果图
在这里插入图片描述
2.测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.min.js"></script>


<body>

    <template id="templ">
        <div>
            <h3>这是vue的组件第三种创建全局组件的方式</h3>
        </div>
    </template>
    <div id="test">
        {
   
   {msg}}
        <my-com1></my-com1>
        <mycomjx></mycomjx>
        <mycom2></mycom2>
        <Mycom2></Mycom2>
        <mycom3></mycom3>
        
    </div>
    
    <template id="templ">
        <div>
            <h3>这是vue的组件第三种创建全局组件的方式</h3>
        </div>
    </template>
    <script >
        //创建vue全局组件的三种方式

        //第一种创建方式【拆散】
        // 1.1使用vue.extends 来创建vue的全局对象
        var com1=Vue.extend({
            //使用template，指定了组件要创建的html结构
            template:'<h3 style="color:red">这是vue的组件分开写创建全局组件的第一种方式</h3><span>内容2</span>'
        })
        //1.2使用vue.components('组件名字',创建出来的模板对象)来注册组件
        Vue.component('myCom1',com1)
         //1.3将注册好的组件名字以html标签的格式来使用组件
         //【需要注意组件名如果大写，那么大写的地方就要换成小写，同时大写前面要加上一个下划线_,第一个字母大写除外】

        //第一种简写
        Vue.component('mycomjx',Vue.extend({
            //使用template，指定了组件要创建的html结构
            template:'<h3 style="color:red">这是vue的组件简写创建全局组件的方式</h3>'
        }))
        //【若注册的组件名是小写，那么就直接使用html标签即可】
        //第一种的第二种简写
        Vue.component('Mycom2',{
            template:'<h3 style="color:blue">这是vue的组件第二种创建全局组件的方式</h3>'
        })
        //【若注册的组件名是第一个字母是大写，那么就直接使用html标签，第一个字母大小写都可】
        
        //创建vue全局组件的第二种方式

        //第三种创建vue组件方式【template属性值是个字符串，内部拼写标签不智能，所以一般采用第三种方式，外部渲染模板】
        //需要注意的是这种方式，渲染模板，最好要放在vue实例控制的test外定义template模板，特定场合会有样式问题
        Vue.component('mycom3',{
            template:'#templ'
        })

        new Vue({
            el:"#test",
            data:{
                msg:"这是数据"
            }
        })
    </script>   
</body>
</html>

3.注意事项
1.vue创建组件的时候V要大写
2.vue创建全局组件，extend和component不要加s,加s一般是创建私有组件，定义格式也不一样，一般在vue实例对象中定义
3.无论哪种全局创建方式最外层的根标签只能有一个，不然可能会报错

vue创建全局组件的三种方式以及注意事项

猜你喜欢