vue组件定义方式，vue父子组件间的传值
vue组件定义方式，vue父子组件间的传值
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <my-nav></my-nav> <hr> <my-nav2></my-nav2> <hr> <my-demo></my-demo> <hr> <script-nav></script-nav> <hr> <my-tmp></my-tmp> <hr> <button @click="show = !show">切换动态组件</button> <component :is="show ?'my-nav':'my-nav2'"></component> <hr> <parent></parent> </div> <hr> <div id="myNav"></div> <script type="nav-template" id="my-nav"> <h2>我是script中的模板</h2> </script> <template id="my-tmp"> <h2 bgcolor="pink">我是template中的模板</h2> </template> <script src="vue.js"></script> <script> //组件: 一个大对象 // 注册组件 (两种编写方式) // 注册组件，传入一个扩展过的构造器 // Vue.component('my-component', Vue.extend({ /* ... */ })) // 注册组件，传入一个选项对象 (自动调用 Vue.extend) // Vue.component('my-component', { /* ... */ }) //1.全局组件 （注册组件的位置在全局环境） //方式一： //1.1定义组件 var myNav = Vue.extend({ template: '<h3>我是my-nav组件->{{msg}}</h3>', data() { return { msg: '我是组件中的数据' } } }) //挂载到Vue的构造函数上，所有的Vue实例（vm）都共享这个组件， //所以就成了全局组件 Vue.component('my-nav', myNav); //全局组件也可以实例化后直接绑定到具体的元素上 //原理：因为myNav继承自Vue，所以也可以作为构造函数 //同样具有Vue的实例方法.$mount() new myNav().$mount('#myNav'); //方式二： 第二个参数是一个对象 Vue.component('my-nav2', { template: '<h4>我是my-nav2222222222222组件->22222222</h4>', }); //2.局部组件 （注册组件的位置在Vue的选项中） // 局部组件可以在Vue 的选项（配置项）中定义（my-demo），也可以使用全局已定义好的组件(my-nav) var vm = new Vue({ data: { msg: 13, show: true }, components: { 'my-demo': { template: '<h2>我是一个纯内部组件</h2>' }, 'my-nav': myNav, //我是一个使用了全局定义的内部组件 'script-nav': { template: '#my-nav' }, 'my-tmp': { template: '#my-tmp' }, 'parent': { template: '<h2>我是父组件-><child :msg-p="msgP" @childMsg="childMsg"></child>{{msgC}}</h2>', data() { return { msgP: '我是父组件中的数据', msgC:'', } }, methods:{ childMsg(msg){ this.msgC = msg } }, components: { 'child': { template: '<div><h2>我是子组件->这是我拿到的父组件的数据->{{msgP}}</h2><button @click="send">发送</button></div>', // props:['msgP'], //方式一['',''] props:{ msgP:String }, data() { return { msgC: '我是子组件中的数据' } }, methods:{ send(){ //vm.$emit('事件名称',数据) this.$emit('childMsg',this.msgC); vm.$emit('test', 'hi') } } }, } } } }).$mount('#app'); vm.$on('test', function (msg) { console.log(msg) setTimeout(function(){ vm.$off() },5000) }) //组件模板 //1. template: '<h4>我是my-nav组件</h4>', //组件的模板：在实际项目开发中，模板的标签一般很多，直接写到js中不是很方便 //2.可以将模板单独放在某个地方 //2.1 <script type="nav-template" id="my-nav"> //2.2 <template id="my-tmp"> //3.动态组件 // <component :is="组件名称"></component> //4.父子组件之间的通信 //4.1 子组件获取父组件的数据 （属性传值） // 在父组件中调用子组件，给子组件绑定一个自定义属性，属性值为要传过云的值 // 在子组件选项中有个 props获取这个自定义属性值，方法有两种： // 4.1.1 数组形式 props : ['属性名'] // 4.1.2 对象形式 props : {'属性名'：String,'属性名':'属性值类型'} // //4.2 父组件获取子组件的数据 （事件系统--方法传参） //原理：子组件触发了父组件上的自定义事件，自定义事件的参数就是子组件要传给父组件的值。 </script> </body> </html>
