vue2.0学习笔记之组件

mac2022-06-30 95

【易错点】：　　　　1. 组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。　　　　2. 组件名称采用横杠间隔命名时，第一个字母大写会报错。写法一：全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">　　　　<Demo></Demo> </div> </body> <script src="vue.js"></script> <script> Vue.component("Demo",{ template:"<h3>全局组件</h3>" }) new Vue({ el:"#app" }) </script> </html>

写法二：全局组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">　　　　<my-temp></my-temp> </div> <template id="DemoTemp"> <h3>全局组件</h3> </template> </body> <script src="vue.js"></script> <script> var Home = { template:"#DemoTemp" }; Vue.component("my-temp",Home) new Vue({ el:"#app" }) </script> </html>

写法三：局部组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-temp></my-temp> </div> <template id="DemoTemp"> <h3>局部组件</h3> </template> </body> <script src="vue.js"></script> <script> var Home = { template:"#DemoTemp" }; // Vue.component("my-temp",Home) new Vue({ el:"#app", components:{ "my-temp":Home } }) </script> </html>

转载于:https://www.cnblogs.com/hcxy/p/7142459.html

最新回复(0)