你眼中有春與秋，勝過我見過愛過的一切山川與河流。
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("我是子組件里面的方法哦"); // 調(diào)用子組件的方法childClick
}
}
}
</script>
// 此為子組件
<template>
<div>
childComponent
</div>
</template>
<script>
export default {
name: "child",
methods: {
childClick(e) {
console.log(e)
}
}
}
</script>
注意 : 子組件的方法不能再父組件中的 created 的鉤子函數(shù)中進行調(diào)用,會報錯
禮物我的代碼 就是一個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="企業(yè)營業(yè)執(zhí)照">
<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="聯(lián)系電話" 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, // 狀態(tài)（0 有效 1刪除）
sCtime: undefined, // 開始時間
eCtime: undefined, // 結束時間
ctimeSort: undefined, //創(chuàng)建時間排序（0:正序、1:倒序）
weightSort: undefined, // 權重排序（0:正序、1:倒序）
hotSort: undefined, // 數(shù)量排序（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();
}
}
},
// 頁碼發(fā)生變化的時候
handleSizeChange(val) {
this.form.pageIndex = val;
this.getData();
},
// 容量發(fā)生變化的時候
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: 李大玄
