vue的三级联动本质上和js的联动是一样的，只不过需要注意一下细节问题

<div id="app">

    <selects></selects>
</div>
<template id="sel">
    <div>
        <select  v-model="text" @change="changCity();changCity1()">
            <option v-for="(item,i) in arr">
                {{item.sheng}}
            </option>
        </select>
        <select  v-model="text1" @change="changCity1()">
            <option
            v-for="(item,i) in cityall"
            >
                {{item.city}}
            </option>
        </select>
        <select v-model="text2">
            <option
                    v-for="(item,i) in nameall"
            >
                {{item.name}}
            </option>

        </select>
    </div>
</template>

html先放这里，里面的函数什么的，我会在下面的代码进行介绍 

<script>
    let selects = {
        template: '#sel',
        data: function () {
            return {
                text:'请选择省份',
                text1:'',
                text2:'',
                cityall:[],
                nameall:[],
                arr: [{
                    sheng:'请选择省份',
                    citys: [{
                        city: '请选择市',
                        names:[{
                            name:'请选择城市'
                        }]
                    }]
                },{
                    sheng: '河南省',
                    citys: [{
                        city: '郑州市',
                        names: [{
                            name:'金水区'
                        },{
                            name:'二七区'
                        }]
                    }, {
                        city: '安阳市',
                        names: [{
                            name:'金水1区'
                        },{
                            name:'二七1区'
                        }]
                    },]
                }, {
                    sheng: '河北省',
                    citys: [{
                        city: '邯郸市',
                        names: [{
                            name:'金水2区'
                        },{
                            name:'二七2区'
                        }]
                    }, {
                        city: '北京市',
                        names: [{
                            name:'金水3区'
                        },{
                            name:'二七3区'
                        }]
                    },]
                },]
            }
        },
        mounted(){
            this.changCity()
            this.changCity1()
        },
        methods: {
            changCity(){
                //我先定义一个变量为this，因为需要获取一开始的this，为了让this指向不会错误
                let me = this
                let item
                me.arr.forEach(function (value) {
                    if (value.sheng == me.text){
                        item = value
                    }
                })
                if (item){
                    this.cityall = item.citys
                    this.text1 = item.citys[0].city
                }
            },
            changCity1(){
                let me = this
                let item
                me.cityall.forEach(function (value) {
                    console.log(me.text1)
                    if (value.city == me.text1){
                        item = value
                    }
                })
                if (item){
                    this.nameall = item.names
                    this.text2 = item.names[0].name
                }
            }
        },

    }
    new Vue({
        el: '#app',
        components: {
            selects
        }
    })
</script>

一、数据解释

当vue使用三级联动的时候，首先要注意数据的格式问题，最好是像我这样arr对象数组里面嵌套一个省份，城市再用一个对象数组包裹起来

其次由于这是给新人和像我一样的小白刚刚接触vue，我们还需要使用v-model来获取下拉框的数据

最后我们需要二个数组来接收一下值，以便来判断联动

二、函数解释

mounted()可以提前执行里面包裹的函数

最重要的是在html里面，@change是数据发生改变的时候，就会触发，而在第一个select里面我用了二个函数，是为了当第一个省份改变的时候，后面的市和城市都会发生改变，不会导致省份发生变化了，后面的市和城市还是原来的