vue组件的使用和事件传递

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

子组件：

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