Vue组件放送之下拉省市区联动

栏目: 编程语言 · 发布时间: 5年前

内容简介：省市区联动，又是一个常见的组件。一般来说，通过 select 元素的 onchange 事件来实现，难度不大。而如今换作 vue 框架下，该如何实现呢？这正事我们接下来要探讨的，——但先请容我说，甚至比旧方法更简单！——这就是来自数据驱动——MVVM 的威力！什么是数据驱动呢？往大的说，可以很大（fei hua），且不同场景或上下文之下有微妙差别的解释——而就本文一说，其概念所映射的实物便是 JSON。一旦观察到数据有任何异样（或说变动），所关联的 UI 也会实时地跟着改！却无须程序员给出半句 DOM 代码

省市区联动，又是一个常见的组件。一般来说，通过 select 元素的 onchange 事件来实现，难度不大。而如今换作 vue 框架下，该如何实现呢？这正事我们接下来要探讨的，——但先请容我说，甚至比旧方法更简单！——这就是来自数据驱动——MVVM 的威力！

什么是数据驱动呢？往大的说，可以很大（fei hua），且不同场景或上下文之下有微妙差别的解释——而就本文一说，其概念所映射的实物便是 JSON。一旦观察到数据有任何异样（或说变动），所关联的 UI 也会实时地跟着改！却无须程序员给出半句 DOM 代码。于是我们这里，连过去所依靠 onchange 事件都不用写了。

我看过一些联动组件，虽然使用了 vue.js 写就组件但是依旧绑定 DOM 的 change 事件，其实那大可不必，——使用数据驱动的话既优雅又简单。笔者的这个组件，总行数不超过 70 行。

数据来源

既然是省市区数据，必然有一数据提供之。我们选择 github 上提供中国行政区域数据：

https://github.com/dwqs/area-data

其 k/v 规律很容易找，就是一开始是 86 中国，然后找到省的 key，把 key 放到 China_AREA Hash 运算得到是所有的“市”，最后如此反复找到“区”。读者可自行理解一下该结构。

实现联动

首先第一个 select，显示的是所有的“省”，这个好办，就是将

addressData[86] 集合显示出来。vue 的 v-for 模板指令除了可以遍历数组之外，还能遍历对象也就是 json。 Vue组件放送之下拉省市区联动

怎么产生联动呢？当用户选择了下拉框内的一项，选择了一个“省”，那么同时就会在 vue 帮助下修改了 data 数据的 province 项，这是在 v-model 这里声明的，

又因，“市”的下拉框，其数据源是绑定 citys 的，这个 citys 并非一个 JSON 数据而是一个 JS 方法，我们称为“计算方法（computed）”，目的是经过一系列的逻辑后返回的结果才是数据源。为什么那样？因为逻辑如果一行不能写完，而要在标签上写完多行，不是不可以，但维护和编写（转义够麻烦的）足够痛苦的，故干脆弄一个 JS 方法，你自己去写好了。vue computed 项表示这里的方法是计算方法，可以在模板中引用执行，同样 v-for 也可以。