Vue3中子组件表单使用v-model给父组件传值

2022-03-04 20:35:12 阅读：471 来源： 互联网

标签：const Vue3 context props 组件 targetValue model modelValue

步骤1：在子组件的props中定义modelValue

步骤2：为表单绑定事件并在更新值的时候发送自定义事件 context.emit('update:modelValue, value)

步骤3：在标签中使用v-model

具体实现


<input
      type="text"
      :value="inputRef"
      @input="updateValue"
/>

export default defineComponent({
  props: {
    modelValue: String
  },
  setup (props, context) {

const inputRef = reactive({ val: props.modelValue || '' })

    const updateValue = (e:KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }
  }
)}

 <!-- 父组件 -->
<template>
  <div>
     <input-component v-model="valFromChild"><input-component>
     <span>{{valFromChild}}<span>
  <div>

标签：const,Vue3,context,props,组件,targetValue,model,modelValue
来源： https://www.cnblogs.com/MaX666999/p/15965976.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3中子组件表单使用v-model给父组件传值