组件的使用共分为3个步骤:1.创建组件构造器、2.注册组件、3.使用组件。
一、全局组件
<div id="app1"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div> <my-component></my-component> <script> //first:creat a 组件构造器 var myComponent=Vue.extend({ template:'<div>This is my first component!</div>' }) //2.注册组件,并制定组件的标签,组件的HTML标签为,<my-component> Vue.component('my-component',myComponent) var app1=new Vue({ el:'#app1' }); var app2=new Vue({ el:'#app2' }) </script>
二、局部组件
<body> <div id="app"> <my-component></my-component> </div> </body> <script> var myComponent=Vue.extend({ template:'<div>This is my first component!</div>' }) new Vue({ el:'#app', components:{ 'my-component':myComponent //这个标签下是局部的,那别的vue实例下就不能用 } }); </script>
三、父子关系
<body> <div id="app"> <parent-component></parent-component> </div> </body> <script> //父子关系 // 先构造子元素 var Child=Vue.extend({ template:'<i>This is a Child!</i>' }) // 子级注册都是在父级构造的里面, var Parent=Vue.extend({ template:'<span>This is Parent!</span><child-component></child-component>', components:{ 'child-component':Child } }) Vue.component('parent-component',Parent) new Vue({ el:'#app' }) </script>
四、组件构造器直接在组件注册中实现
Vue.component('parent-component',{ template:'<div>This is the first component!' }) new Vue({ el:'#app' })
五、在components中实现局部注册
var vm2 = new Vue({ el: '#app2', components: { // 局部注册,my-component2是标签名称 'my-component2': { template: '<div>This is the second component!</div>' }, // 局部注册,my-component3是标签名称 'my-component3': { template: '<div>This is the third component!</div>' } } })
参考地址:http://www.cnblogs.com/keepfool/p/5625583.html