vue项目实战(2)_H5之家 - 中国HTML5教程资源分享第一站

给子组件上注册引用信息 ref="page1" ，拿到改引用信息 this.$refs.page1 ，其实也就是获取子组件的意思，接着调用子组件的方法 this.$refs.page1.handleParentClick() ; handleParentClick 是方法名，

可以自定，只要子组件也有对应的方法名即可。

<template> <div id="appVue"> <div class='ddiv' @click="divClick" ></div> <page1 ref="page1" :infodata="infodata"></page1> </div> </template> <script type="text/ecmascript-6"> import page1 from './components/page1/page1'; export default { name: 'appVue', data(){ return { infodata:{ ‘name’:’曾田生’， ‘age’:'24' } } }, methods:{ divClick:function(){ //调用子组件 page1 的 handleParentClick 方法 this.$refs.page1.handleParentClick(); } }, components: { page1 } } </script> <style lang="scss"> </style>

子组件：

子组件在 methods 对象里声明被父组件调用的方法 handleParentClick

<template> <div id="page1"> <p>{{infodata.name}}</p> <p>{{infodata.age}}</p> </div> </template> <script type="text/ecmascript-6"> export default { props: { infodata: { type: Object, default: function () { return{ ‘name’:’xxx’， ‘age’:'111' } } } }， watch：{ ’infodata’:function(){ console.log('infodata 数据变化会触发我这个方法的执行' ); } }， methods:{ handleParentClick: function () { console.log('父组件唤起了该方法的执行' ); } } } </script> <style lang="scss"> </style> 5、子组件给父组件回传数据上面第4点讲了父组件可以调用子组件的方法，但是子组件是不能调用父组件的方法的，为了保护父组件数据不被污染或破坏。但 vue 也用了一套方法来将子组件的数据回传给父组件。组件除了可以给 div 加上 `v-on:click = 'doSomething'` 来对 div监听点击事件外，父组件还可以用 `v-on:name='listenChild' `来监听子组件传递给父组件的数据。

父组件：

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<template> <div id="appVue"> <div class='ddiv' @click="divClick" ></div> <page1 v-on:page-to-appvue='listenChild' ref="page1" :infodata="infodata"></page1> </div> </template> <script type="text/ecmascript-6"> import page1 from './components/page1/page1'; export default { name: 'appVue', data(){ return { infodata:{ ‘name’:’曾田生’， ‘age’:'24' } } }, methods:{ listenChild: function (msg) { console.log('监听子组件传递过来的数据'+msg+‘并触发改方法的执行’ ); }， divClick:function(){ //调用子组件 page1 的 handleParentClick 方法 this.$refs.page1.handleParentClick(); } }, components: { page1 } } </script> <style lang="scss"> </style>

子组件：

使用 $emit(eventName) 触发事件

<template> <div id="page1"> <div @click="divClick" ></div> <p>{{infodata.name}}</p> <p>{{infodata.age}}</p> </div> </template> <script type="text/ecmascript-6"> export default { props: { infodata: { type: Object, default: function () { return{ ‘name’:’xxx’, ‘age’:'111' } } } }， watch：{ ’infodata’:function(){ console.log('infodata 数据变化会触发我这个方法的执行' ); } }， methods:{ divClick:function(){ // 给父组件发送消息 this.$emit('page-to-appvue',{‘name’:’xxx’,‘age’:'111'}); }, handleParentClick: function () { console.log('父组件唤起了该方法的执行' ); } } } </script> <style lang="scss"> </style> 三、nodejs 模拟线上数据调试做前端开发一般不会只做静态页面，特别是使用 vue 框架的时候，一般是具有复杂点的数据交互你才选择它。那就免不了需后台数据的调试，咱们可以先写好接口，再模拟一下后台数据，到时候前后端数据联调就会轻松多了 1、开发中的调试

在项目的跟目录下模拟一份json数据：