vue元件命名中的坑
阿新 • • 發佈：2018-12-15
<!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> <script src="/vue.js"></script> </head> <body> <div id="app"> <comA></comA> <com-b></com-b> <comc></comc> </div> <script> var componentA = { template: `<div style="color:red">我是A元件</div>` } var componentB = { template: `<div style="color:yellow">我是B元件</div>` } var componentC = { template: `<div style="color:pink">我是C元件</div>` } var app = new Vue({ el: '#app', components: { "comA": componentA, "com-b": componentB, "comc": componentC } }) </script> </body> </html>
如果 components選項中元件的名字為 'comA' ，那麼引用元件時就要用 'com-a' 否則是無法解析的。