最初版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分页组件</title>
<script src="./js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
ul li{
font-size: 20px;
border: 1px solid;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 10px;
}
.active{
background-color: #f0f;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!-- 调用组件 -->
<!-- 通过v-bind简写形式,将父元素的变量传给子元素 -->
<page :pageindex="pageIndex1" :count="50" :pagesize="6" @change="change"></page>
<!-- count代表一共有多少条数据,pagesize代表每一页可以展示多少条数据 -->
<!-- change方法是,子集将自己的变量传给父级时,自定义的一个方法 -- >
</div>
<script>
Vue.component("page", {
template: `
<div>
<ul>
<li v-for="(r,i) in totalpage" :class="{active:selfpageindex===r}" @click="cli(r)">{{r}}</li>
</ul>
</div>
`,
data() {
return {
totalpage:0, // 总页数
selfpageindex:0
}
},
methods:{
cli(r){
this.selfpageindex = r;
this.$emit("change",this.selfpageindex) // 将子级的变量通过change方法传递给父级
}
},
props:["pageindex","count","pagesize"], // 接收父元素的值
created() {
// data数据加载完毕,dom未加载
this.totalpage=Math.ceil(this.count/this.pagesize) // 总页数为总条数/每页可呈现的条数
this.selfpageindex=this.pageindex // 我们无法直接修改父级穿过来的变量,所以我们要用一个变量来承接他,就可以对这个变量进行操作了
},
})
new Vue({
el: '#app',
data() {
return {
pageIndex1:3,
}
},
methods: {
change(e){
console.log(e); // 获取到子集传过来的变量
}
}
});
</script>
</body>
</html>
修改版本
因为涉及到了父级将变量传给子级,子级操作过后,将变量又传回父级,所以我们可以使用v-model双向绑定。这下我们便可以省去前面的父级传给子级使用:pageindex="pageIndex1"
的步骤,直接改为 v-model="pageIndex1"
,但是子级依然要去承接这个值,在props中使用value就可以了。子级想要把这个变量再传给父级,只要使用this.$emit("input",this.selfpageindex)
就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分页组件</title>
<script src="./js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
ul li{
font-size: 20px;
border: 1px solid;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 10px;
}
.active{
background-color: #f0f;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!-- 将父元素的变量传给子元素 -->
<page v-model="pageIndex1" :count="50" :pagesize="6"></page>
<page v-model="pageIndex2" :count="62" :pagesize="7"></page>
<page v-model="pageIndex3" :count="70" :pagesize="3"></page>
<page v-model="pageIndex4" :count="162" :pagesize="50"></page>
</div>
<script>
Vue.component("page", {
template: `
<div>
<ul>
<li v-for="(r,i) in totalpage" :class="{active:selfpageindex===r}" @click="cli(r)">{{r}}</li>
</ul>
</div>
`,
data() {
return {
totalpage:0, // 总页数
selfpageindex:0
}
},
methods:{
cli(r){
this.selfpageindex = r;
this.$emit("input",this.selfpageindex)
}
},
props:["value","count","pagesize"], // 接收父元素的值
created() {
// data数据加载完毕,dom未加载
this.totalpage=Math.ceil(this.count/this.pagesize) // 总页数为总条数/每页可呈现的条数
this.selfpageindex=this.value
},
})
new Vue({
el: '#app',
data() {
return {
pageIndex1:3,
pageIndex2:1,
pageIndex3:1,
pageIndex4:1,
}
},
methods: {
},
watch:{
pageIndex1(e){
console.log(e);
}
}
});
</script>
</body>
</html>