gitHub地址:https://github.com/manlili/vue_learn里面lesson12
一创建组建的步骤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> <zujian></zujian> </div> <script type="text/javascript"> var myComponent = Vue.extend({ //第一步:定义 template: '<div>我是内容</div>' }) Vue.component('zujian',myComponent) //第二步:注册到Vue上面 var myVue = new Vue({ //第三步:创建实例化 el: '.test' }) </script> </body> </html>
或者用一种简单的方法创建组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <template id="lili-template"> <!--注意此处必须是id,用class不行--> <div>我是内容2</div> </template> <div class="test"> <zujian></zujian> </div> <script type="text/javascript"> var myVue = new Vue({ el: '.test', components: { zujian: { template: '#lili-template' } } }) </script> </body> </html>
二 父子组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件--父子组件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> <!--局部注册--> <zujian></zujian> </div> <script type="text/javascript"> var childComponent = Vue.extend({ //第一步:定义 template: '<div class="mychild">我是孩子</div>' }); var parentComponent = Vue.extend({ template: '<div class="myParent">我是父容器<child></child></div>', //注意此处要引用孩子组件 components: { 'child': childComponent } }); Vue.component('zujian',parentComponent); //第二步:注册到Vue上面 var myVue = new Vue({ //第三步:创建实例化 el: '.test' }) </script> </body> </html>
或者另一种比较明了的写法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件--父子组件另一种写法</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> <zujian></zujian> </div> <template id="parentComponent"> <div class="myParent"> 我是父容器 <child></child> </div> </template> <template id="childComponent"> <div class="mychild"> 我是孩子 </div> </template> <script type="text/javascript"> var myVue = new Vue({ el: '.test', components: { zujian: { template:'#parentComponent', components: { child: { template:'#childComponent' } } } } }) </script> </body> </html>
三 Vue组件选项
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件--组件选项</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> <div class="lala"> <zujian></zujian> </div> </div> <script type="text/javascript"> var myComponent = Vue.extend({ template: '<div>我是{{a}}{{b}}</div>', data : function () { //不想让MyComponent 所有的实例将共享同一个 data 对象,所以将data写成函数形式返回 return { a: 1, b: 2 } }, el: function () { //不想让MyComponent 所有的实例将共享同一个 el 对象,所以将el写成函数形式返回 return ".lala" } }) var myVue = new Vue({ el: '.test', components: { zujian:myComponent } }) </script> </body> </html>
四 Vue组件作用域(父子通信)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue组件--组件作用域</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 子组件模板 --> <template id="child-template"> {{msg1}} </template> <!-- 父组件模板 --> <div id="events-example"> <p>Messages: {{ messages | json }}</p> <child :msg1="mssss"> </child> </div> <script type="text/javascript"> var parent = new Vue({ el: '#events-example', data: { messages: '我是父框架222', mssss: 'ddddddd' }, components: { child: { template: '#child-template', props: {msg1: String } } } }) </script> </body> </html>