vue實現組件數據雙向綁定

vue組件實現數據雙向綁定

說明：vue組件的父子組件之間如何傳值基本用法，有時像表單元素input，select，radio可能涉及到數據的雙向綁定，基本的用法，監聽子組件的值，傳值到父組件實時改變父組件的值，也能夠運用官網上的自定義組件的v-model去實現，這裏以iview的遠程搜索select爲例，簡單地記錄一下：

1、基礎傳值實現

父組件：

<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>

 2、自定義組件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