vue组件的使用和事件传递

时间:2022-05-16 16:38:06

子组件与父组件的事件传递具体实现如下:

子组件:

<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>

相关文章