組件 · 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> ~~~