vue 自定义组件v-model

自定义batchImportGoods.vue组件

<template>
<span>
  <el-button type="success" size="mini" @click="batchImport"> 批量导入 </el-button>
  <el-dialog
    title="批量导入"
    append-to-body
    :visible.sync="batchImportDialogVisible"
    :before-close="handleImportDialogClose">
    <el-input
      type="textarea"
      :rows="6"
      placeholder="请输入商品条码，多个以英文逗号隔开"
      v-model="batchImportGoodsSn">
      <!--
      @change="changeGoodsSnFun">
      -->
    </el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleImportDialogClose">取 消</el-button>
      <el-button type="primary" @click="batchImportFun">确 定</el-button>
    </span>
  </el-dialog>
</span>
</template>

<script>
export default {
    name: 'BatchImportGoods',
    components: {  },
    props: {
        value: {
            type: String
        }
    },
    computed: {
        batchImportGoodsSn: {
            get() {
               return this.value;
            },
            set(val) {
                //这里多用于子组件间没有input元素中,通过在computed属性中监听值变化事emit input事件
                // $emit 方法可以触发当前实例上的事件，这里触发的事input事件，附加参数都会传给监听器回调
                // input 事件在用户输入时触发，它是在元素值发生变化时立即触发
                this.$emit('input', val);
            }
        }
    },
    data() {
        return {
            batchImportDialogVisible: false,
        }
    },
    methods: {
        handleImportDialogClose() {
            this.batchImportDialogVisible = false;
        },
        batchImportFun() {

        },
        batchImport() {
            this.batchImportDialogVisible = true;
        },
        // changeGoodsSnFun(value) {
        //     this.$emit('input', value);
        // }
    }

}

</script>

组件使用

<batchImportGoods v-model="batchImportGoodsSn"/>