Vue组件间的双向数据绑定

Vue组件间的双向数据绑定

• 案例是Parent和Child两个组件之间的双向数据绑定，所以采用了父子组件通信+子父组件通信，如果是其他类型的组件间双向数据绑定可以使用Vuex。

• 由于个人工作中基本是ElementUI进行开发，所以案例里使用了输入框和滑块这两个组件。试验的是输入框和滑块之间的双向数据绑定。效果图如下：
  

Parent组件：1.通过单向数据绑定将数据传递给Child组件。2.将自定义事件绑定给Child组件，监听Child组件

<template>
    <div>
        <el-input v-model="num" placeholder="请输入数值"></el-input>
        <child :num="Number(num)" @changeNum="changeNum"></child>
    </div>
</template>

<script>
export default {
    name:'Parent',
    data(){
        return{
            num:0
        }
    },
    methods:{
        changeNum(val){
            this.num=val;
        }
    },
    components:{
        'child':resolve=>{
            require(['./Child.vue'],resolve)
        }
    }
}
</script>

Child组件：1.props接收Parent组件传递过来的数据并验证。2.展示数据。3.修改数据通过$emit()去触发父组件监听的自定义事件并传值给Parent组件

<template>
    <div>
         <el-slider v-model="nowNum" @change="changeNumber"></el-slider>
    </div>
</template>

<script>
export default {
    name:'Child',
    props:{
        num:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
           nowNum:0 
        }
    },
    methods:{
        changeNumber(){
            this.$emit("changeNum",this.nowNum)
        }
    },
    mounted(){
        this.nowNum = JSON.parse(JSON.stringify(this.num))
    },
    watch:{
        num(){
            this.nowNum = JSON.parse(JSON.stringify(this.num))
        }
    }
}
</script>