Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div>父组件</div> <div> <button @click='handle'>销毁事件</button> </div> <test-tom></test-tom> <test-jerry></test-jerry> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 兄弟组件之间数据传递 */ // 提供事件中心 var hub = new Vue(); Vue.component('test-tom', { data: function () { return { num: 0 } }, template: ` <div> <div>TOM:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function () { hub.$emit('jerry-event', 2); } }, mounted: function () { // 监听事件 hub.$on('tom-event', (val) => { this.num += val; }); } }); Vue.component('test-jerry', { data: function () { return { num: 0 } }, template: ` <div> <div>JERRY:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function () { // 触发兄弟组件的事件 hub.$emit('tom-event', 1); } }, mounted: function () { // 监听事件 hub.$on('jerry-event', (val) => { this.num += val; }); } }); var vm = new Vue({ el: '#app', data: {}, methods: { handle: function () { hub.$off('tom-event'); hub.$off('jerry-event'); } } }); </script> </body> </html> props属性名规则 /* 在props中使用驼峰形式,模板中需要使用短横线的形式. 字符串形式的模板中没有这个模板 Vue.component('menu-item',{ // 在JavaScript中是驼峰式的 props: ['menuTitle'], template: '<div>{{ menuTitle }}</div>' }) <!-- 在html中是短横线方式的 --> <menu-item menu-title="nihao"></menu-item> */Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div>{{pmsg}}</div> <menu-item :menu-title='ptitle'></menu-item> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 父组件向子组件传值-props属性名规则 */ Vue.component('third-com', { props: ['testTile'], template: '<div>{{testTile}}</div>' }); Vue.component('menu-item', { props: ['menuTitle'], template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>' }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '动态绑定属性' } }); </script> </body> </html> props属性值类型 /* 字符串 String 数值 Number 布尔值 Boolean 数组 Array 对象 Object */Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div>{{pmsg}}</div> <menu-item :pstr='pstr' :pnum='12' pboo='true' :parr='parr' :pobj='pobj'></menu-item> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 父组件向子组件传值-props属性值类型 */ Vue.component('menu-item', { props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'], template: ` <div> <div>{{pstr}}</div> <div>{{12 pnum}}</div> <div>{{typeof pboo}}</div> <ul> <li :key='index' v-for='(item,index) in parr'>{{item}}</li> </ul> <span>{{pobj.name}}</span> <span>{{pobj.age}}</span> </div> </div> ` }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', pstr: 'hello', parr: ['apple', 'orange', 'banana'], pobj: { name: 'lisi', age: 12 } } }); </script> </body> </html> 插槽 组件插槽 /* 父组件向子组件传递内容 */