子组件与父组件的事件传递具体实现如下:
子组件:
<template> <section class="xftz-data-list"> <div class="data-list-cont"> <scroll :data="listData" :pullup="pullup" @scrollToEnd="loadUp" ref="scroll" class="list"> <div> <slot></slot> </div> <div v-show="!listData.length"> <loading></loading> </div> </scroll> </div> </section> </template> <script> export default { methods: { /* 上拉加载 */ loadUp () { this.$emit('selfevent') } } } <script>
父组件:
<template> <div class="xftz-optional-page"> <data-list :topDoc="'headTop'" :listTitle="listTitle" :listData="listData" @selfevent="selfevent"></data-list> </div> </template> <script> import DataList from 'src/common/data-list/data-list' export default { methods: { /* 上拉加载 */ selfevent () { console.log('加载') } } } </script>
这里需要注意的是子组件和父组件之间传递值是通过emit方法进行的
子组件中使用
this.$emit("selfevent", data);
父组件中使用
<data-list @selfevent="selfevent"></data-list>