vue子组件

先来看demo:

父组件：

<template>
  <div class="app-container calendar-list-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="待审核" name="first">
        <test-page status="1" @toP="funct"></test-page>
      </el-tab-pane>
      <el-tab-pane label="全部" name="second">
        <test-page status="0"></test-page>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import TestPage from '@/views/components/TestPage'

export default {
  components: { TestPage },
  name: "test",
  data() {
    return {
      activeName: 'first',
    };
  },
  methods: {
    funct(v) {
        console.warn(v)
    }
  }
};
</script>

子组件

<template>
  <div>
    <el-table
      key="tableList"
      v-loading="listLoading"
      :data="list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="id"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="地点"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status == 0">已拒绝</el-tag>
          <el-tag v-if="scope.row.status == 1">审核中</el-tag>
          <el-tag type="success" v-if="scope.row.status == 2">已通过</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="活动时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.start_date }}</span><br>至
          <span>{{ scope.row.end_date }}</span>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
...

export default {
  name: "TestPage",
  props: ['status'],
  data() {
    return {
      list: [],
      pagination: "",
      listQuery: {
        page: 1,
        limit: 20,
        status: 1,
        type:'',
      },
      typeList: [],
      dialogFormVisible: false,
      temp: {
          image : '',
          user: {
            nickname: '',
          },
          college: {
            name: "",
          },
          materials: [],
      },
    };
  },
  created() {
    this.listQuery.status = this.$props.status;
    this.getList();
    this.$emit('toP', this.listQuery)
  },
  methods: {
    ...
  }
};
</script>
<style>
.row-container .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

这个demo简单使用了组件引入，及子组件于父组件通信。

引入子组件

import TestPage from '@/views/components/TestPage'

export default {
  components: { TestPage },

使用:

<test-page></test-page>

父组件传递数据到子组件

父组件的status就是传递的数据

<test-page status="0"></test-page>

子组件接收：

this.$props.status

子组件传递数据到父组件

子组件，其实是传递了一个toP事件

this.$emit('toP', this.listQuery)

父组件

<test-page @toP="funct"></test-page>

...

methods: {
    funct(v) {
        console.warn(v)
    }
}

这里需要稍微注意的就是驼峰命名转**-**，使用相对简单。