穀粒商城學習——P41vue元件化
阿新 • • 發佈：2021-06-12
在vue裡，所有vue的例項都是元件
Vue.component全域性宣告註冊一個元件
const宣告區域性元件（當前vue例項）
每個元件標籤之間互不干擾
語法和new Vue一樣，只是template代替了el。用法，直接將註冊元件名字當做一個標籤使用<元件名字></元件名字>。
註冊全域性語法
Vue.component("元件名字", {
template: `模板程式碼`,
data() {},
……
});
註冊區域性元件語法
const 元件名字= { template: `模板程式碼`, data() {}, …… };
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <View Codebody> <div id="app"> <button v-on:click="count++">我被點選了 {{count}} 次</button><br/> <counter></counter><br/> <counter></counter><br/> <counter></counter><br/> <counter></counter><br/> <counter></counter><br/> <button-counter></button-counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> //1、全域性宣告註冊一個元件 Vue.component("counter", { template: `<button v-on:click="count++">我被點選了 {{count}} 次</button>`, data() { return { count: 1 } } }); //2、區域性宣告一個元件 const buttonCounter = { template: `<button v-on:click="count++">我被點選了 {{count}} 次~~~</button>`, data() { return { count: 1 } } }; new Vue({ el: "#app", data: { count: 1 }, components: { 'button-counter': buttonCounter } }) </script> </body> </html>