Vue3.x系列--组件的基本使用

组件

全局组件和局部组件

1、全局注册组件使用应用程序实例 component()方法注册组件

app.component(组件名称，函数或者选项对象)

    <div id="app">
        <my-component></my-component>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({})
        vm.component('my-component',{
            data(){
                return{
                    message:'Hello,Vue'
                }
            },
            template:`<h2>{{message}}</h2>`
        })
        vm.mount('#app')
    </script>

小驼峰命名法命名组件时，需要将大写字母改为小写字母，同时两个字母之间需要使用 - 进行链接 <my-com>

2、局部注册

components选项注册仅在当前实例作用域下可用

<div id="app">
        数据： <button-counter></button-counter>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const MyComponent ={
            data(){
                return{
                    num:1000
                }
            },
            template:`<h3>{{num}}</h3>`
        }
        const vm =Vue.createApp({
            components:{
                ButtonCounter:MyComponent
            }
        }).mount('#app')
    </script>