一、组件复用(局部组件、全局组件、父类组件传子类组件、子类组件传父类组件)
1,组件
(1)局部组件
写一个子组件
写一个父类组件
1.引入局部组件
2.将test作为一个组件存放到当前组件中,把那个导入的组件注册到组件里面
组件名是my-test
(2)全局组件
全局组件与局部组件的全部是,注册全局组件可以进行使用Main.js
引入组件,将这个组件注册成一个全局组件
在其他的组件中进行使用
2、传值(父传子、子传父)
(1)父传子
父组件的data中有一个变量
在父组件中绑定一个属性 partoson 传递给子组件
子组件接收这个值
使用props 来接收父组件中的值
{{partoson}}使用父组件传递过来的值
(2)子传父
将子组件中的值传递给父组件,子组件在进行传值的时候一般通过按钮传递
点击按钮时通过事件进行传值
handlechild()
// $emit 第一个参数代表的是事件的名字
// 第二个参数代表的是 通过这个事件要传递给父组件的参数是什么
父组件使用一下子组件中定义的事件接收值
通过函数 接收值
val是子组件传过来的值
使用一下值
二、复用组件分页部门员工表
写一分页子类的组件
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="mydata.currPage"
:page-sizes="[2, 4, 6, 8]"
:page-size="mydata.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="mydata.total">
</el-pagination>
</div>
</template>
<script>
export default {
/*父传子*/
props:['mydata'],
methods:{
handleSizeChange(val) {
/* this.page.pageSize=val;
this.queryData();*/
this.page.pageSize=val;
this.page.currPage=this.mydata.currPage;
/* 子传父*/
this.$emit('mychangeData',this.page)
},
handleCurrentChange(val) {
/* this.page.currPage=val;
this.queryData();*/
this.page.currPage = val;
this.page.pageSize=this.mydata.pageSize;
/* 子传父*/
this.$emit("mychangeData",this.page)
},
},
data(){
return{
page:{
currPage:1,
pageSize:2,
total:100,
},
}
}
}
</script>
<style scoped>
</style>
父类(例如部门、员工)直接用子类
<template>
<div>
<el-select v-model="dapts.did" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.did"
:label="item.dname"
:value="item.did">
</el-option>
</el-select>
<el-button round @click="queryEmp">查询</el-button>
<el-table
:data="tableData"
:row-class-name="tableRowClassName">
<el-table-column
prop="uid"
label="编号">
</el-table-column>
<el-table-column
prop="username"
label="名字"
>
</el-table-column>
<el-table-column
prop="dept.dname"
label="部门名字"
>
</el-table-column>
</el-table>
<!--分页-->
<my-fenye :mydata="page" @mychangeData="changeData"></my-fenye>
</div>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
<!--分页,子传父的数据-->
changeData(obj){
this.page.pageSize=obj.pageSize;
this.page.currPage=obj.currPage;
this.queryData();
},
tableRowClassName({row, rowIndex}) {
if (rowIndex%4 === 1) {
return 'warning-row';
} else if (rowIndex%4 === 3) {
return 'success-row';
}
return '';
},
queryData(){
// page里面的参数
// deptno
let newparam={...this.page,...this.dapts}; // 把两个对象合并成一个对象
this.$axios.get("user",{params:newparam}).then(res=>{
console.log(res);
// 给total进行赋值
this.page.total=res.total;
this.tableData=res.records;
})
},
queryEmp(){
this.queryData();
},
queryDeptData(){
// vue node 服务器 8899
// axios tomcat 8080
// axios 发出请求
// dept http://localhost:8080/dept
this.$axios.get("dept",{params:{
currPage:1,
pageSize:100
}}).then(res=>{
console.log(res);
// 给total进行赋值
this.options=res.records;
})
}
},
data() {
return {
tableData: [],
page:{
currPage:1,
pageSize:2,
total:100,
},
dapts:{
did:""
},
options: [],
}
},
created(){
this.queryData();
// 部门的信息
this.queryDeptData();
}
}
</script>