组件 · vue3.x -- 系列学习

>[success] # 全局组件 vue2.x vs vue3.x ~~~ 1.'2.x' 和'3.x'创建全局组件上 1.1.'2.x'在注册之后可以用在任何新创建的 Vue 根实例全局组件，产生这种效果的原因是都从同一个 'Vue' 构造函数创建的每个根实例共享相同的全局配置 1.2.'2.x' 这种多个'vue实例共享'产生的问题，全局配置很容易意外地污染其他测试用例 2.通过下面案例注意，需要'3.x' 最后在链式调用的时候绑上'mount'即 const app = createApp(Counter) app.component({...}).mount(...) ~~~ >[info] ## 关于template 标签说明 ~~~ 1.使用template标签，因为特性是不会被浏览器渲染，可以参考mdn 2.除了下面template 这种包裹利用浏览器不会渲染template 中内容，也可使用script标签，并且标记它的类型为 x-template，这样浏览器也不会解析内容在script 包裹下html缺点少了代码提示写法如下 <script type="x-template" id="todo"> <ul> <li v-for="todo in ctodos">{{todo}}</li> </ul> </script> ~~~ >[danger] ##### 效果 * 2.x ~~~ // 这会影响两个根实例，因为绑定在Vue构造函数上，因此两个新的vue 实例上都共享这个组件 Vue.component({ /* ... */ }) const app1 = new Vue({ el: '#app-1' }) const app2 = new Vue({ el: '#app-2' }) ~~~ * 3.x ~~~ // 只在自己创建的绑定全局组件 import { createApp } from 'vue' const app = createApp(Counter) app.component({ /* ... */ }) ~~~ >[info] ## 使用案例 ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <todo-item :ctodos="todos" /> </div>  <template id="todo"> <ul> <li v-for="todo in ctodos">{{todo}}</li> </ul> </template>  <script src="https://unpkg.com/vue@next"></script> <script> // 创建全局组件 /* 不想在html 上定义template 可以这么写 app.component('todo-item',{ props: { todo:Object }, template:`<li>{{todo.text}}</li>` }) */ const TodoItem = { template: '#todo', props: { ctodos: Array, }, } // 创建vue const vm = Vue.createApp({ data() { return { todos: [1, 2, 3, 4, 5], } }, }) // 将组件设置为全局组件 // 第一参数：组件名第二个参数：组件配置 vm.component('todo-item', TodoItem) vm.mount('#app') </script> </body> </html> ~~~ >[success] # 局部组件案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <todo-item :ctodos="todos" /> </div>  <script src="https://unpkg.com/vue@next"></script> <script> // 创建vue const vm = Vue.createApp({ // 局部组件 components: { todoItem: { template: `<ul> <li v-for="todo in ctodos">{{todo}}</li> </ul>`, props: { ctodos: Array, }, }, }, data() { return { todos: [1, 2, 3, 4, 5], } }, }) vm.mount('#app') </script> </body> </html> ~~~