简单理解其实组件就是制作自定义的标签，这些标签在HTML中是没有的。
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> </head> <body> <div id="app"> <my-component></my-component> <!--<my-component></my-component>--> <!--可重用性--> <!--<my-component2></my-component2>--> <!--此处不渲染--> </div> <!--<my-component></my-component>--> <!--此处不渲染--> <p>----------------分割线--------------------</p> <div id="app2"> <my-component></my-component> <my-component2></my-component2> <my-component3></my-component3> </div> <my-component3></my-component3> <script> var myComponent = Vue.extend({ template: "<div>这是我的第一个component</div>" }) //全局组件 Vue.component('my-component', myComponent) new Vue({ el: "#app" }) var hello = { template: "<div>这是我的第三个component</div>" } new Vue({ el: '#app2', //局部组件 components: { "my-component2": { template: "<div>这是我的第二个component</div>" }, "my-component3": hello } }) </script> </body> </html>
全局注册：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <template id="myComponent"> <div>这是一个component <p>123</p> <a>456</a> </div> </template> <script> //全局注册 /*Vue.component("my-component",{ template:"#myComponent" })*/ var vm = new Vue({ el: "#app", components: { "my-component": { template: "#myComponent" } } }) </script> </body> </html>
局部注册：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> </head> <body> <div id="app"> <parent-component></parent-component> </div> <script> var Child = { template:"<p>This is a child Component</p>" } //var Parent = Vue.extend() Vue.component("parent-component",{ //局部注册child组件，child组件只能在parent组件内使用。 template:"<div><p>This is a parent Component</p><child-component></child-component></div>", components:{ 'child-component':Child } }) new Vue({ el:"#app" }) </script> </body> </html>