全局组件
编写一个全局组件如同编写传给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中既可以使用-也可以使用大驼峰。