input输入框跨组件传值的复用

实现环境： vue3

实现思路：双向绑定

1.效果:

• 父传子 父组件中通过v-model绑定的数据直接影响 input框的value值
• 子传父 子组件在用户输入新内容的时候 始终可以把新内容同步到父组件中v-model绑定的数据上

2.实现

• 父传子 绑定了一个名称 modelValue的属性
  初始化的时候就以传下来的prop作为默认值

• 子传父 每次用户输入新写的东西都需要同步到父组件中
  绑定了一个名称为update:modelValue
  emit
  Vue3 中 modelValue说明

落地代码

1. 封装组件

<template>
  <div>
    <input type="text" :value="txtValue" @input="msgChange">
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'h-input',
  props: {
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    // 接收父组件传来的内容
    const txtValue = ref(props.modelValue)

    watch(() => {
      return props.modelValue // 监听 props.modelValue 的变化
    }, () => {
      txtValue.value = props.modelValue // 当 props.modelValue 发生变化的时候,修改 txtValue 的值
    })

    // 将修改的内容传给父组件
    function msgChange (e) {
      emit('update:modelValue', e.target.value)
    }

    return { txtValue, msgChange }
  }
}
</script>

2. 使用组件

<template>
  <h-input v-model="msg" ></h-input>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const msg = ref('this is msg')
    return { msg }
  }
}
</script>