v-model 简单介绍

在使用vue的过程中会经常用到input和textarea这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model 本质上是一个语法糖，如

<input v-model="dataA"/> 

其实是

<input :value="dataA" @input="dataA = $event.target.value">

其中的 @input 是对 input输入事件的监听，:value="dataA" 是将监听事件中的数据放到 input中，v-model 不仅是可以赋值还可以从input中获取数据，同时是实时的，

实现效果

1. 点击搜索框

2. 弹出选择框

3. 选择后，回填

代码如下：

<template>
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="dataVal"
      class="input-with-select"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="doSearch"
      ></el-button>
    </el-input>

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-table v-loading="loading" :data="dataList">
        <el-table-column
          v-for="item in fieldParams"
          :label="item.name"
          :key="item.id"
          align="center"
          :prop="item.id"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="doSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SearchComponent",
  data() {
    return {
      loading: false,
      open: false,
      dataVal: "",
      dataList: [],
      pageNum: 1,
      total: 0,
    };
  },
  props: {
    title: String,
    functionId: String,
    value: String,
    fieldParams: Array,
    pageSize: Number,
    load: { type: String, default: "loadData" },
    value: String,
  },
  methods: {
    doSearch() {
      this.open = true;
      this.doLoad();
    },
    doSelect(row) {
      this.dataVal = row.id;
      this.open = false;
      this.$emit("handleSelected", row);
    },
    doCancel() {
      this.open = false;
    },
    doLoad() {
      this.$emit(this.load, (c, r) => {
        this.dataList = r;
        this.total = c;
      });
    },
  },
  watch: {
    // 监听dataVal 的变化
    dataVal: {
      handler(val) {
        // 向上传递input事件，可以使父组件的v-model 生效
        this.$emit("input", val);
      },
    },
  },
};
</script>

父组件中使用

  <SearchComponent
                v-model="form.extras"
                title="用户选择"
                :fieldParams="fieldParams"
                @handleSelected="openSelect"
                @loadData="getDataList"
              ></SearchComponent>

注意点

1. 在实现的过程中碰到一些问题，如在父组件中通过 v-model 绑定了 form.extras，但在提交时，form.extras 一直没有值，后面去查发现是因为 SearchComponent 组件中，是通过 v-model 绑定的 dataVal ，但这值是不会回传到父组件中，需要通过 watch的方式，将事件向上传递

初学，有问题，请指正!!!