双向数据绑定

共识：父组件可以向子组件传递数据使用props，但是props是只读的，子组件没法直接修改父组件传递过来的props数据

props : {
    count : {
        type:Number,
        default:88    
    }
}

子组件给父组件传递数据：emit函数

this.$emit('input',value)

父组件接收子组件传递来的数据

methods:{
    input(value){
        this.data = value;                
    }
}

emit发送数据（常规写法）

父组件：data传递给子组件

子组件：需要调用父组件的updateData方法，将数据回传给父组件

emit方法第一个参数指定了调用父组件的方法，第二个参数指定了此方法传递的参数

v-model绑定数据（vue3方式）

父组件：v-model="data"来绑定数据

子组件：如果父组件使用v-model那么子组件的props必须有个默认的参数modelValue

<script>
    export default {
      props: {
        //绑定默认的v-model的数据
        //此处key必须为modelValue
        modelValue:String,  
        //绑定其他需要双向的数据
        firstName: String,
        lastName: String
      },
      emits: [
          'update:firstName', 
          'update:lastName'
      ]
    }
</script>

子组件中我们将数据以 modelValue 命名来接收（固定命名）

子组件发送数据：emit('update:modelValue', '你好, 世界!')

input数据绑定

重点是：自定义组件props中定义modelValue参数，内部input绑定:value="modelValue"，定义input事件，将this.$email("update:valueModel",e.target.value);则可以实现双向数据绑定

父组件

子组件

<script>
    export default{
        props:{
            modelValue:{
                type:String,
                default:null            
            }        
        },
        methods:{
            onInput(e){
               this.$emit('update:modelValue',e.target.value)             
            }        
        }    
    }
</script>

select数据绑定

重点是 el-select需要绑定:model-value="modelValue"

父组件

子组件

<script>
    
    import common from '../../assets/js/utils/common_utils.js'
    import apiCustom from '../../assets/js/apis/custom/api_custom_user.js'

    export default{        
    name : 'UserSelector',
    setup(){
        return { common }
    },
        
    props : {
        //默认绑定数据
        modelValue : {
            type : [Object,Array,Number,String],
            default : null
        },        
     },
                
    data() {
        return {
            loading:false,
            dataList: this.options || []
        }
    },
        
    created() {
        this.queryDrop('all');
    },
        
    methods : {
    
        /**
        * 当组件变化时候将事件传递出去
        */
        onChange(val){
            this.$emit('update:modelValue',val);
        },
    
    }
        
    }
    
</script>