vue双向数据流动的场景

vue是单向数据流动的，不过有些应用场景是双向流动的，比如选择一个用户列表组件，当你点开这个组件时会传一个数组chooseList，chooseList表示已选择的用户，进到页面要是已勾选状态，而在这个用户组件还可以勾选更多用户，这样会改变原来的chooseList，这种情况下我们应该如何处理呢？
我们可以用属性props传chooseList数组，而在组件内部改变chooseList的话，就要使用事件$emit。
父组件：

<template>
    <div>
        <receiver :choose-list="chooseData" :all-data="usersData" @changeList="changeList"></receiver>
    </div>

</template>


<script>
    import receiver from '@/components/receiver'

    export default {
        name: "test",
        components: {receiver: receiver},
        methods:{
            changeList(newdata){
                this.chooseData = newdata // 在这里改变chooseData，不能直接在子组件直接改！

            },
        },
        data() {
            return {
                chooseData: [1, 2],
                usersData: [{userId: 1, name: '张三'},
                    {userId: 2, name: '李四'},
                    {userId: 3, name: '王五'},
                    {userId: 4, name: '六子'}
                ]
            }
        },

    }
</script>

<style scoped>

</style>

子组件：

<template>
    <div>
        <button @click="chooseUser"></button>
    </div>
</template>

<script>
    export default {
        name: "receiver",
        props: {
            chooseData: {//不能直接改
                required: true,
                type: Array,

            }
        },
        mounted(){
            this.dataList = JSON.parse(JSON.stringify(this.chooseData))//拷贝一份数据，防止篡改源数据

        },
        methods:{
            chooseUser(){
                this.dataList.push(3)//改动了dataList，不会影响到源数据
                this.$emit('changeList', this.dataList)//将修改后的数据传回父组件
            }
        },
        data() {
            return {
                dataList:[]
            }
        }
    }

</script>

<style scoped>

</style>

虽然这么实现看起来有点繁琐，但好处是很多的。
因为这样实现没有破坏单向数据流动，当子组件数据发生改变时通知到父组件，父组件更新数据后再传回给子组件，这样你再次进入子组件就是最新的视图了，否则mounted钩子只会执行一次，你只能使用watch强行监听变化。