您的位置：首页 > Web前端 > Vue.js

Vue手写一个省市区三级联动

2019-05-23 18:46 344 查看

Vue手写一个省市区三级联动

效果如下

上代码(此篇代码思路是运用3个兄弟组件（省=>市=>区（县））传值)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>省市区（县）三级联动</title>
<style>
select {
width: 150px;
height: 25px;
float: left;
border-radius: 5px;
border: 1px solid red;
outline: none;
}
</style>
</head>
<body>
<div id="app">
<province></province>//省组件
<city></city>//市组件
<qu></qu>//区（县）组件
</div>
</body>
<script src="../lib/axios.min.js"></script>
<script src="../lib/vue.js"></script>
<script>
var Province = {
template: `<div>
<select v-model='currentValue'>
<option v-for="item in list1">{{ item.name }}</option>
</select>
</div>`,
data() {
return {
currentValue: "",
list1: []
};
},
//watch监听select标签变化，并发送数据
//先在要监听的select标签里v-model='name'，再watch监听该标签数据变化，格式如下
// watch: {
//		name(name) {
//			console.log(name);
//    		bus.$emit("aa", name);
//    }
//  },
watch: {
currentValue(currentValue) {
bus.$emit("aa", currentValue);
}
},
created() {
//向服务器发送请求获取数据
axios.get("http://10.8.162.52:3310/regions.json").then(res => {
this.list1 = res.data;
var arr = this.list1;//将数据打包成arr
bus.$emit("bb", arr);//通过bus.$emit（方法名，传递的数据）向兄弟组件发送数据
});
}
};
var City = {
template: `<div>
<select v-model='currentValue'>
<option v-for="item in list1">{{ item.name}}</option>
</select>
</div>`,
data() {
return {
currentValue: "",
list: [],
list1: []
};
},
watch: {
currentValue(currentValue) {
bus.$emit("cc",currentValue);
}
},
created() {
bus.$on("bb", this.foo1);
bus.$on("aa", this.foo2);//bus.$on接收数据，方法名与派发数据bus.$emit方法名保持一致
},
methods: {
foo1(arr) {
this.list = arr;先用this.list接收arr
},
foo2(currentValue) {//currentValue是接收到的province组件中select标签的当前值
var item = this.list.find(item => item.name ==currentValue);//通过arr.find()方法获取当前省的数据
this.list1 = item.cityList;//将当前省的所有市数据赋给list1
var arr = this.list1;//组件之间相互独立，arr，currentValue，list，list1，foo1,foo2变量不会相互干扰
bus.$emit("dd", arr);
}
}
};
var Qu = {
template: `<div>
<select>
<option v-for="item in list1">{{ item.name}}</option>
</select>
</div>`,
data() {
return {
list: [],
list1: []
};
},
created() {
bus.$on("dd", this.foo1);
bus.$on("cc", this.foo2);
},
methods: {
foo1(arr) {
this.list = arr;
},
foo2(currentValue) {//currentValue是接收到的city组件中select标签的当前值
var item = this.list.find(item => item.name == currentValue);
this.list1 = item[0].areaList;//将当前市的所有区(县)数据赋给list1
}
}
};
var bus = new Vue();//借助于事件车，通过事件车的方式传递数据
var app = new Vue({
el: "#app",
components: {
province: Province,
city: City,
qu: Qu
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航