element 组件传值

引言:
       在element进行编程的时候,会用到 ‘组件’,那么子组件和父组件是如何进行传值的呢?请看一下步骤：

一、创建父组件

1. vue代码

<template>
    <div>
        <el-row class="main-top">
        <el-row>
            <el-tabs tabPosition="left" style="min-height: 280px" value="column" @tab-click="handleClick">
                <el-tab-pane label="专栏管理" name="column">
                   <column-list name="column" :page="query" :listData="columnList"  @fetch-data="findUserColumnList"/>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</template>

a. 其中的 <column-list name="column" page="query":listData="columnList" @fetch-data="findUserColumnList"/> 就是引入一个子组件
b. 其中的 :listData="columnList" 表示将要传给子组件的数据存放在 listData 这个变量中

2. js代码

<script>
     //导入子组件
    import ColumnList from '@/components/column/List'

    export default {
        // 引用中间件进行未登录访问拦截
        middleware: 'auth',
       //导入子组件     
        components: {ColumnList},
        data() {
            return {
                columnList:[],
            }
        },
        methods: {
           },
        async asyncData({app, store}) {
           //打开页面后自动加载获取数据的方法
        },
    }

二、创建子组件

1. html代码

<template>
    <div>
        <el-table class="label-list"
                  :show-header="false"
                  :data="listData"
                  style="width: 100%">
            <el-table-column style="padding-left: 40px">
                <template slot-scope="scope" style="padding-left: 40px">
                    <h1 class="title" style="display: block;margin-left: 20px">
                      {{ scope.row.name }}
                    </h1>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

a. 其中的 :data="listData" 表示读取父组件中传来的数据
b. 其中的 slot-scope="scope" 表示将接受到的数据放进 scope中,以供接下来的循环使用

2. js代码

export default {
   //初始化listData数据(接受父组件传来的数据,如果没有,则使用下面默认的两条)
    props: {
        listData: { 
            type: Array,
            default: () => {
                return [
                    {
                        id: '11',
                        title: '热门头条配置动态的代理域名1111111111111',
                    },
                    {
                        id: '12',
                        title: '使用配置动态的代理域名111111111111111',
                    }
                ]
            }
        },
}