子组件与父组件的事件传递具体实现如下:
子组件:
<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>