你眼中有春与秋，胜过我见过爱过的一切山川与河流。
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>
这为子组件,可以借鉴 , 有不足的地方欢迎大家指出 最后附上我的博客
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
