vue实现组件数据双向绑定

vue组件实现数据双向绑定

说明：vue组件的父子组件之间如何传值基本用法，有时像表单元素input，select，radio可能涉及到数据的双向绑定，基本的用法，监听子组件的值，传值到父组件实时改变父组件的值，也可以运用官网上的自定义组件的v-model去实现，这里以iview的远程搜索select为例，简单地记录一下：

一、基础传值实现

父组件：

<template>
  <RemoteSelect
    :fun="handleQuery"
    :options="options"
    :loading="loading"
    :optionValue="optionValue"
    :optionText="optionText"
    :selectValue="nameId"
    @setSelectValue="setSelectValue">
  </RemoteSelect>
</template>

<script>
  export default {
    data () {
      return {
        options:[],
        loading:false,
        optionValue:'id',
        optionText:'text',
        nameId:'',
        name:''
      }
    },
    methods: {
      handleQuery(name){
        if(name !== ''){
          this.queryList(name);
        }else{
          this.options  = [];
        }
      },
      queryList(name){
        this.loading = true;
        this.axios.post('api/getList',{name}).then((response)=>{
          this.options = response.data.data;
        }).catch((response)=>{
          console.log(response.data.msg);
        })
        this.loading = false;
      },
      setSelectValue(id){
        this.nameId = id;
      }
    }

  }
</script>

子组件：

<template>
  <Select filterable
          remote
          clearable
          :remote-method="fun"
          :loading="loading"
          v-model="currentValue">
    <Option v-for="(item,index) in options" :value='item[optionValue]' :key="index">{{item[optionText]}}</Option>
  </Select>
</template>

<script>
  export default {
    name:'RemoteSelect',
    props: {
      fun: {
        type: Function,
        default: () => () => {}
      },
      options:{
        type: Array,
        default: () => {return []}
      },
      loading:{
        type:Boolean,
        default:false
      },
      selectValue:{
        type:[String, Number],
        default:''
      },
      optionValue:{
        type:String,
        default:''
      },
      optionText:{
        type:String,
        default:''
      }
    },
    data(){
      return{
        currentValue:'',
      }
    },
    created() {
      this.setValue();
    },
    methods:{
      setValue(){
        this.currentValue = this.selectValue;
      }
    },
    watch:{
      'currentValue': {
        deep: true,
        handler (newVal, oldVal) {
          this.$emit('setSelectValue', newVal)
        }
      },
    }
  }
</script>

 二、自定义组件v-model

vue官网例子：

 父组件：

<template>
  <RemoteSelect
    :fun="handleQuery"
    :options="options"
    :loading="loading"
    :optionValue="optionValue"
    :optionText="optionText"
    v-model="nameId"
    @setSelectValue="setSelectValue"> 父组件：
  </RemoteSelect>
</template>

<script>
  export default {
    data () {
      return {
        options:[],
        loading:false,
        optionValue:'id',
        optionText:'text',
        nameId:'',
        name:''
      }
    },
    methods: {
      handleQuery(name){
        if(name !== ''){
          this.queryList(name);
        }else{
          this.options  = [];
        }
      },
      queryList(name){
        this.loading = true;
        this.axios.post('api/getList',{name}).then((response)=>{
          this.options = response.data.data;
        }).catch((response)=>{
          console.log(response.data.msg);
        })
        this.loading = false;
      }
    }
  }
</script>

子组件：

<template>
  <Select filterable
          remote
          clearable
          :remote-method="fun"
          :loading="loading"
          :value="selectValue"
          :class="cls"
          @on-change="setSelectValue">
    <Option v-for="(item,index) in options" :value='item[optionValue]' :key="index">{{item[optionText]}}</Option>
  </Select>
</template>

<script>
  export default {
    name:'RemoteSelect',
    model: {
      prop: 'selectValue',
      event: 'setSelectValue'
    },
    props: {
      fun: {
        type: Function,
        default: () => () => {}
      },
      options:{
        type: Array,
        default: () => {return []}
      },
      loading:{
        type:Boolean,
        default:false
      },
      selectValue:{
        type:[String, Number],
        default:''
      },
      cls:{
        type:String,
        default:'condition-group-ipt'
      },
      optionValue:{
        type:String,
        default:''
      },
      optionText:{
        type:String,
        default:''
      }
    },
    data(){
      return{
      }
    },
    methods:{
      setSelectValue(e){
        this.$emit('setSelectValue', e)
      }
    }
  }
</script>

参考地址：https://www.iviewui.com/components/select