VUE3（十）组件化开发

全局组件

编写一个全局组件如同编写传给Vue.createApp()方法的参数一样，需要传入一个含有options的对象，同样有template、data、methods等选项。

注册一个组件的方法是，获取了Vue.createApp()的实例之后，调用component方法，第一个参数是组件名称，第二个就是创建的组件对象。

    <template id="my-app">
        <component-a></component-a>
    </template>

    <template id="component-a">
        <h2>{{title}}</h2>
        <P>{{desc}}</P>
        <button @click="btnClick">按钮点击</button>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world"
                }
            },
            methods:{

            }
        };
        const App=Vue.createApp(app);
        // 使用app注册一个全局组件
        // 全局组件：意味着注册的这个组件可以在任何的组件模板中使用
        App.component("component-a",{
            template: "#component-a",
            data(){
                return {
                    title: "我是标题",
                    desc: "我是内容哈哈哈"
                }
            },
            methods: {
                btnClick(){
                    console.log("按钮发生了点击");
                }
            }
        });
        App.mount("#app")
    </script>

component的命名规则：在html中使用-来分割，在JavaScript中既可以使用-也可以使用大驼峰。