VUE中子父传方法

一连十六卦,卦卦皆无你,罢了,杀了那算命的!!!

VUE中子父传方法,如何在父组件中使用子组件的方法

今天说说vue中的传方法,当我们每个页面中的代码过多,功能过多的时候,就会显得代码特别臃肿,所以我们要将代码进行拆分,传值的话我就不说了,之前有说过 不知道的朋友可以去看我的博客 李大玄的博客 废话少说,上代码

// 此为父组件
<template>
  <div>
    <button @click="parentClick">点击</button>
    <Child ref="mychild" />   //使用组件标签
  </div>
</template>
 
<script>
  import Child from './index';   //引入子组件Child 同级目录
  export default {
    name: "parent",
    components: {
      Child    // 将组件隐射为标签
    },
    methods: {
      parentClick() {
        this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
      }
    }
  }
</script>

// 此为子组件
<template>
  <div>
    childComponent
  </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      childClick(e) {
        console.log(e)
      }
    }
  }
</script>

注意 : 子组件的方法不能再父组件中的 created 的钩子函数中进行调用,会报错

礼物我的代码 就是一个tab栏切换里面有好多东西 , 就会用到这个方法

下面上我的代码

<template>
    <div class="representative">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="代表队列表" name="first">
                <representative-list ref="representativeList"></representative-list>
            </el-tab-pane>
            <el-tab-pane label="代表队审核" name="second">
                <representative-examination></representative-examination>
            </el-tab-pane>
            <el-tab-pane label="代表队申诉" name="third">
                <representative-appeal></representative-appeal>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { getreportListFn, rejectFn, submitFn } from 'api/game/report/reporting';
    import { mapGetters } from "vuex";
    /* import representativeList from './components/representativeList';
    import representativeExamination from './components/representativeExamination';
    import representativeAppeal from './components/representativeAppeal'; */
    export default {
        name: "parent",
        data() {
            return {
                activeName: 'first',
                
            }
        },
        components: { // representativeList,representativeExamination,representativeAppeal
            'representative-list': () => import('./components/representativeList'), // 代表队列表
            'representative-examination': () => import('./components/representativeExamination'), // 代表队审核
            'representative-appeal': () => import('./components/representativeAppeal'), // 代表队申诉
        },
        // 页面一加载的时候
        created() {
            // this.getData();
        },
        computed: {
            ...mapGetters(["elements"])
        },
        methods: {
            getData() {
                this.$refs.representativeList.clickAAA()
            },
            handleClick(tab, e) {
                if (tab.name == 'first') {
                    this.getData();
                } else if (tab.name == 'second') {
                    // this.getEditIonList();
                } else if (tab.name == 'third') {
                    // this.clear();
                }
            },
        }
    }
</script>

<style  rel="stylesheet/scss" scoped>
    .representative {
        margin: 30px;
    }
</style>

注意 : 我上面列举了两种引入组件的方法,可以借鉴 上面为父组件

<template>
    <div id="representativeList">
        <!-- 代表队列表 -->
        <div>
            <el-form  label-width="100px">
                <el-form-item label="负责人ID">
                    <el-input clearable v-model="form.keyWord" placeholder="负责人ID" @keyup.enter.native="filtrate"></el-input>
                </el-form-item>
                <el-form-item label="负责人昵称">
                    <el-input clearable v-model="form.keyWord" placeholder="负责人昵称" @keyup.enter.native="filtrate"></el-input>
                </el-form-item>
                <el-form-item label="代表队名称">
                    <el-input clearable v-model="form.keyWord" placeholder="代表队名称" @keyup.enter.native="filtrate"></el-input>
                </el-form-item>
                
                <el-form-item label="申请时间">
                    <el-date-picker
                        v-model="timeBox"
                        type="datetimerange"
                        placeholder="开始日期                   ----                   结束日期"
                        :default-time="['12:00:00']">
                    </el-date-picker>
                </el-form-item>

                <el-button @click="filtrate" type="primary" style="margin-left:.4rem;">筛选</el-button>
            </el-form>

            <el-table :data="tableData" @sort-change='sortChange'  border style="width: 100%">
                <el-table-column align="center" width="100" prop="name" label="负责人ID"></el-table-column>
                <el-table-column align="center" width="120" prop="name" label="负责人昵称"></el-table-column>
                <el-table-column align="center" prop="name" label="代表队名称"></el-table-column>

                <el-table-column align="center" width="150" prop="img" label="代表队LOGO">
                    <template scope="scope">
                        <el-popover placement="right" title="" trigger="hover">
                            <img :src="scope.row.img"/>
                            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 50px;max-width: 130px">
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column align="center" width="150" prop="img" label="认证申请公函">
                    <template scope="scope">
                        <el-popover placement="right" title="" trigger="hover">
                            <img :src="scope.row.img"/>
                            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 50px;max-width: 130px">
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column align="center" width="150" prop="img" label="企业营业执照">
                    <template scope="scope">
                        <el-popover placement="right" title="" trigger="hover">
                            <img :src="scope.row.img"/>
                            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 50px;max-width: 130px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="150" prop="img" label="商标注册证书">
                    <template scope="scope">
                        <el-popover placement="right" title="" trigger="hover">
                            <img :src="scope.row.img"/>
                            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 50px;max-width: 130px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center"  prop="text" label="联系电话" width="120"></el-table-column>
                <el-table-column align="center" width="150" prop="userId" label="申请时间" sortable='custom'></el-table-column>
                <el-table-column align="center" width="150" prop="weight" label="审核时间" sortable='custom'></el-table-column>
            </el-table>

            <!-- 框架中的分页组件 -->
            <template>
                <el-pagination
                    style="margin-top: 20px"
                    align="center"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageIndex"
                    :page-size="form.pageSize"
                    layout="total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "representativeList",
        data() {
            return{
                tableData: undefined,
                total: 0,
                timeBox: undefined,
                form: {
                    pageIndex: 1,
                    pageSize:  10,
                    keyWord: undefined,     // 关键字（话题名查找）
                    status: undefined,      // 状态（0 有效 1删除）
                    sCtime: undefined,      // 开始时间
                    eCtime: undefined,      // 结束时间
                    ctimeSort: undefined,   //创建时间排序（0:正序、1:倒序）
                    weightSort: undefined,  // 权重排序（0:正序、1:倒序）
                    hotSort: undefined,     // 	数量排序（0:正序、1:倒序）
                },
            }
        },
        methods: {
            clickAAA() {
                alert(1)
            },
            // 筛选的点击事件
            filtrate() {
                if(this.form.pageIndex != 1){
                    this.form.pageIndex = 1;
                }else{
                    this.form.eCtime = undefined;
                    this.form.sCtime = undefined;
                    if (!this.timeBox || this.timeBox[0] == null  || this.timeBox[1] == null) {
                        this.getData();
                        return;
                    };
                    for (var i = 0 , len = this.timeBox.join(',').split(','); i < len.length; i++) {
                        this.form.sCtime = this.timestampToTime(len[0]);
                        this.form.eCtime = this.timestampToTime(len[1]);
                    };
                    this.getData();
                }
            },
            // 排序
            sortChange(column, prop, order) {
                this.form.ctimeSort  = undefined;
                this.form.weightSort = undefined;
                this.form.hotSort    = undefined;
                if (column.prop == "weight") {
                    if (column.order == "descending") {
                        this.form.weightSort= '0';
                        this.getData();
                    } else {
                        this.form.weightSort = '1';
                        this.getData();
                    }
                } else if (column.prop == "hot") {
                    if (column.order == "descending") {
                        this.form.hotSort= '0';
                        this.getData();
                    } else {
                        this.form.hotSort = '1';
                        this.getData();
                    }
                }
            },
            // 页码发生变化的时候
            handleSizeChange(val) {
                this.form.pageIndex = val;
                this.getData();
            },
            // 容量发生变化的时候
            handleCurrentChange(val) {
                this.form.pageIndex = val;
                this.getData();
            },
        }
    }
</script>

<style scoped>
    #representativeList {
        background-color: #fff;
    }
    #representativeList .el-form-item{
        display:inline-block;
    }
</style>

这为子组件,可以借鉴 , 有不足的地方欢迎大家指出  最后附上我的博客

李大玄的博客               李大玄的CSDN 

我从不幻想,我只是在努力认清现实…