美文网首页
vue对UI组件的input二次包装时怎么让组件v-model正

vue对UI组件的input二次包装时怎么让组件v-model正

作者: 刘其瑞 | 来源:发表于2020-12-18 17:35 被阅读0次

下面就是实战案例,直接复制出去即可

父组件

<!-- parent -->
<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="ruleForm">
      <Child prop="give" v-model="formData.give"></Child>
    </el-form>
    <button @click="submitForm()">立即创建</button>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {

  components: {
    Child,
  },
  data() {
    return {
      rules: {
        give: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
        ],
      },
      formData: {
        give: 3
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
        }
      });
    },
  },
  watch: {
    'formData.give' (newVal) {
      console.log('父组件值发生变化了:', newVal)
    }
  },

};
</script>

子组件:

<template>
  <div>
    <el-form-item label="我对父组件说:" :prop="prop">
      <!-- <el-radio-group v-model="value" @change="handleChange">
        <el-radio :label="3">备选项</el-radio>
        <el-radio :label="6">备选项</el-radio>
        <el-radio :label="9">备选项</el-radio>
      </el-radio-group> -->

      <el-input v-model="value" @input="handleChange"></el-input>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: {
   // 接收父组件的值
    value:{
      type: [Number, String]
    },
  // 接收父组件的校验
    prop: {
      type: String,
    },
  },
  methods: {
    handleChange (val) {
      this.$emit('input', val)
    },
  }
};
</script>

<style scoped></style>

相关文章

网友评论

      本文标题:vue对UI组件的input二次包装时怎么让组件v-model正

      本文链接:https://www.haomeiwen.com/subject/ezexnktx.html