需求
页面中有一个省份下拉选项，当选择每个省份之后渲染出每个省份的城市（省份3个自定义，每个省中的城市3个自定义）
需求：使用组件完成（全局注册或局部注册）省份下拉选择充当父组件渲染出来的城市充当子组件
结构
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
页面中有一个省份下拉选项，当选择每个省份之后
渲染出每个省份的城市（省份3个自定义，每个省中的城市3个自定义）
需求：使用组件完成（全局注册或局部注册）
父组件省份下拉选择充当父组件渲染出来的城市充当子组件
-->
<title>省份</title>
<!-- 引入 Vue.js 库 -->
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件：省份选择器，当选择省份时触发 province-selected 事件 -->
<province-selector @province-selected="handleProvinceSelected"></province-selector>
<!-- 子组件：城市渲染器，接收 province 作为 prop，并根据省份显示相应城市 -->
<city-renderer :province="selectedProvince"></city-renderer>
</div>
<script>
// 定义省份选择器组件
Vue.component('province-selector', {
template: `
<select @change="onProvinceChange">
<option value="">请选择省份</option>
<!-- 使用 v-for 循环生成省份选项，:key 和 :value 分别绑定循环索引和省份名称 -->
<option v-for="(province, index) in provinces" :key="index" :value="province">{{ province }}</option>
</select>
`,
data() {
return {
// 定义省份列表
provinces: ['广东省', '广西省', '四川省']
};
},
methods: {
// 当省份选择改变时触发此方法，通过 $emit 触发 province-selected 事件并将选中的省份作为参数传递
onProvinceChange(event) {
this.$emit('province-selected', event.target.value);
}
}
});
// 定义城市渲染器组件
Vue.component('city-renderer', {
props: ['province'], // 接收父组件传递的 province 属性
template: `
<!-- 只有当 province 存在时才显示内容 -->
<div v-if="province">
<h2>{{ province }} 的城市</h2>
<ul>
<!-- 根据 cities 计算属性循环生成城市列表项 -->
<li v-for="(city, index) in cities" :key="index">{{ city }}</li>
</ul>
</div>
`,
data() {
return {
// 定义省份对应的城市列表
citiesByProvince: {
'广东省': ['广州市', '深圳市', '佛山市'],
'广西省': ['南宁市', '桂林市', '柳州市'],
'四川省': ['成都市', '绵阳市', '宜宾市']
}
};
},
computed: {
// 计算属性 cities 根据 province 返回对应的城市列表，若 province 不存在则返回空数组
cities() {
return this.citiesByProvince[this.province] || [];
}
}
});
// 创建 Vue 实例，挂载到 #app 元素上
new Vue({
el: '#app',
data: {
// 定义当前选中的省份，初始值为空字符串
selectedProvince: ''
},
methods: {
// 处理省份选择事件，更新 selectedProvince 的值
handleProvinceSelected(province) {
this.selectedProvince = province;
}
}
});
</script>
</body>
</html>
