Vue全局组件

全局组件

首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦

// 定义一个全局组件
Vue.component('my-component', {template: '<div class="my-component">{{ message }}</div>',data() {return {message: 'Hello from MyComponent!'};}
});// 创建 Vue 实例
new Vue({el: '#app',template: `<div><h1>Hello from Parent Component!</h1><my-component></my-component></div>`
});

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

<div id="app"><component-a></component-a><component-b></component-b><component-c></component-c>
</div>Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })

📌在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

内置模板

📌在component中直接书写template,极度不推荐

<script src="../../vue.js"></script><body><div id="app">{{title}}<!-- 全局组件的使用 --><hello></hello><hello></hello><hello></hello><!-- 多次使用相当于多次new，所有的组件使用之间并无关联 -->这部分在后来的VueComponent中会有解释</div></body><script>new Vue({el:"#app"})// 定义全局组件// component组件定义("组件名字",{组件数据})Vue.component("hello", {// 定义当前组件的结构template: `<div><p>这是{{title}}组件</p><span>{{num}}</span><hr><button @click="add">按钮</button></div>`,// 定义当前组件的数据data() {return {title: "hello world",num: 0,};},// 定义当前组件的方法methods: {add() {this.num++;},},});</script>

📌但是以上案例并不推荐使用，因为在js的字符中书写html代码，不会自动进行语法检查，不方便书写，也不方便调试

引入模板

📌建议使用vue提供的template标签，创建模板，然后再注册到组件

<script src="../../vue.js"></script><body><div id="app"><!-- 使用全局组件 --><world></world></div></body><!-- 使用模板 --><template id="aaa"><div><h4>{{title}}</h4><input type="text" v-model="msg" /><span>{{msg}}</span></div></template><script>let app = Vue.createApp({data() {return {title: "这是全局组件",};},});// 定义全局组件方法二// component组件定义("组件名字",{组件数据})app.component("world", {template: "#aaa",// 定义当前组件的数据data() {return {title: "hello world",msg: "今天不太开心",};},});app = app.mount("#app");</script>