V-model VUe2 – VUe3 implements different ways of bidirectional binding across components

vue2:

1. Create reactive data in the calling component parent and pass it into the wrapped Input component using the V-Model binding

<template>
	<div>
		<el-form :rules="rules" ref="Form" :model="Form">
			<el-form-item label="Name" prop="name">
				<Input v-model="Form.name" />
			</el-form-item>
			<el-form-item label="Password" prop="pwd">
				<Input v-model="Form.pwd" />
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					@click="submitForm"
					style="marginLeft:110px ;"
					>Login < / el - button ></el-form-item>
		</el-form>
	</div>
</template>

<script>
	import ElForm from "./ElForm.vue";
	import ElFormItem from "./ElFormItem.vue";
	import Input from "./Input.vue";
	export default {
		components: {
			ElForm,
			ElFormItem,
			Input
		},
		data() {
			return {
				Form: { name: "11".pwd: "22",}}};</script>

<style lang="scss" scoped>
</style>

Copy the code

The vue2 emit event name must be INPUT. The vue2 emit event name must be input. The vue2 emit event name must be input

<template>
	<div class="myInput">
		<input type="text" @input="input" class="inputinner" :value="value" />
	</div>
</template>

<script>
	export default {
		name: "MyInput".props: {
			value: {
				type: String}},data() {
			return {};
		},
		methods: {
			input(e) {
				this.$emit("input", e.target.value); }}};</script>

<style lang="scss" scoped>
	.myInput {
		margin: 5px 10px;
		.inputinner {
			background-color: #fff;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			box-sizing: border-box;
			color: # 606266;
			display: inline-block;
			font-size: inherit;
			height: 40px;
			line-height: 40px;
			outline: none;
			padding: 0 15px;
			transition: border-color 0.2 s cubic-bezier(0.645.0.045.0.355.1);
			width: 100%; }}</style>
Copy the code

vue3:

1. Create reactive data in the calling component parent and pass it into the wrapped Input component using the V-Model binding

<template>
     <div  class="container">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">Email address</label>
          <ValidateInput :rules="emailRules"支那v-model="emailVal"* * / >
          {{emailVal}}
        </div>
     </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ValidateInput, { RulesProp } from './components/ValidateInput.vue'
export default defineComponent({
  name: 'App*',*
  components: {
    ValidateInput
  },
  setup () {
   ** const emailVal = ref('hello') * *return {
      emailVal
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

2. Use modelValue to receive the parameter in the props, and initialize modelValue to the reactive data, and use the :value binding on the input. When an input event occurs, use @INPUT to bind the event, and assign the callback parameter to the reactive data. Use context, emit (‘update:modelValue’,e.target.value) to implement bidirectional binding

<template>
    <div class="validate-input-container pb-3 ">
    <input type="text"
      class="form-control"
      :class="{'is-invalid': inputRef.error}"支那:value='inputRef.val'* * @blur="validateInput"
      @input="updateValue"
    >
    <span v-if="inputRef.error" class="invalid-feedback">{{inputRef.message}}</span>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive } from 'vue'
const emailReg = / ^ [a - zA - Z0-9.! # $% & * + / = '? ^ _ ` {|} ~ -] + @ [a zA - Z0-9 -] + (? :\.[a-zA-Z0-9-]+)*$/
interface RuleProp{
    type:'required' | 'email';
    message:string
}
export type RulesProp=RuleProp []
export default defineComponent({
  props: {
    rules: Array as PropType<RulesProp>,
  **  modelValue: {
      type: String.required: true
    }**
  },
  setup (props, context) {
    const inputRef = reactive({
    **  val: props.modelValue,**
      error: false.message: ' '}) * *const updateValue = (e:KeyboardEvent) = > {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }**
    const validateInput = () = > {
      if (props.rules) {
        const allPassed = props.rules.every(rule= > {
          let passed = true
          inputRef.message = rule.message
          switch (rule.type) {
            case 'required': passed = (inputRef.val.trim() ! = =' ')
              break
            case 'email':
              passed = emailReg.test(inputRef.val)
              break
            default:
              break
          }
          returnpassed }) inputRef.error = ! allPassed } }return {
      validateInput,
      inputRef,
      updateValue
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
Copy the code