Vue知识点总结(10)——全局组件的创建和使用（超级详细）

在上一期我们已经讲解了组件的概念和作用，还有局部组件的封装、挂载和使用。
这期我们说一下全局组件的创建和使用，很简单。

<div id="app">
    <Vheader></Vheader>
</div>

<script>
    Vue.component('Vheader',{
        data () {
            return {
                msg:'我是全局组件Vheader的data内容'
            }
        },
        methods: {
            handleClick(){
                this.msg = 'msg值被改变了';
            }
        },
        template:`
            <div>
                我是导航栏组件
                <h3>{{msg}}</h3>
                <button @click='handleClick'>改变</button>    
            </div>
            
        `
    })
    new Vue({
        el:'#app'
    });
</script>

语法格式是Vue.component(’’,{}),第一个参数是组件名字，第二个参数是组件的相关配置。

只要创建了全局组件,就可以在任意地方使用（template），只要是被创建的Vue实例就可以，它是不需要挂载的，所以它才能被叫做全局组件。

全局组件只需要完成封装和使用即可。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！