父子组件相互传值

为了封装组件

父组件

<template>
    <div>
        <!-- :tableData自定义属性，tableData1，tableData2，是要传过去的数据 -->
        <!-- @handle，$event是子组件传过来的方法和数据 -->
        <!-- ps：子组件传多个字，将$event换成arguments接收 -->
        <Table :tableData="tableData1" @handle="ok1($event)"></Table>
        <Table :tableData="tableData2" @handle="ok2($event)"></Table>
    </div>
</template>

<script>
// 导入子组件
import Table from './index';
export default {
    data() {
        return {
            tableData1: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            tableData2: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ]
        };
    },
    // 注册子组件
    components: {
        Table
    },
    methods: {
        ok1(val) {
            console.log(val);
        },
        ok2(val) {
            console.log(2, val);
        }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {}
};
</script>

<style lang='' scoped>
</style>

子组件

<template>
    <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[0]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
    </div>
</template>

<script>
export default {
    // 接收父组件传来的值
    props: ['tableData'],
    data() {
        return {
            multipleSelection: []
        };
    },

    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
        
           this.multipleSelection = val;

           //子组件通过$emit给父组件传值
            this.$emit('handle', this.multipleSelection);
        }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {}
};
</script>

<style lang='' scoped>
</style>

子组件传多个值

子组件

  handleSelectionChange(val) {
  
            this.$emit('handle', val, 1, 2, 3);
          
        }

父组件

 <Table :tableData="tableData2" @handle="ok2(arguments)"></Table>




   ok2(val) {
            console.log(2,val);
        }