4.组件间通信-v-model

vue3组件间通信-v-model

父组件:

javascript 复制代码
<template>
  <div class="father">
    <h3>父组件</h3>
    <!-- <h4>{{ username }}</h4>
    <h4>{{ password }}</h4> -->
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> <br>
    <input type="text" :value="username" @input="username=(<HTMLInputElement>$event.target).value"> -->
    <!-- v-model用在组件标签上 -->
    <AtguiguInput v-model="username"/>
    <!-- 对于原生事件,$event就是事件对象,能$event.target.value
         对于自定义事件,$event就是触发事件时所传递的数据,不能$event.target.value,只能$event
    --> 
    <!-- <AtguiguInput 
      :modelValue="username" 
      @update:modelValue="username = $event"
    /> -->

    <!-- 修改modelValue -->
    <!-- <AtguiguInput v-model:ming="username" v-model:mima="password"/> -->
  </div>
</template>
<script setup lang="ts" name="Father">
	import { ref } from "vue";
  import AtguiguInput from './AtguiguInput.vue'
  // // 数据
  let username = ref('zhansgan')
  let password = ref('123456')
</script>
<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>

子组件:

javascript 复制代码
<template>
  <input 
    type="text" 
    :value="modelValue"
    @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
  >
  <br>
   <!-- 对于原生事件,$event就是事件对象,能$event.target.value
         对于自定义事件,$event就是触发事件时所传递的数据,不能$event.target.value,只能$event
    --> 
  <input 
    type="text" 
    :value="mima"
    @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
  >
</template>
<script setup lang="ts" name="AtguiguInput">
  defineProps(['modelValue','mima'])
  const emit = defineEmits(['update:modelValue','update:mima'])
</script>

<style scoped>
  input {
    border: 2px solid black;
    background-image: linear-gradient(45deg,red,yellow,green);
    height: 30px;
    font-size: 20px;
    color: white;
  }
</style>
相关推荐
www_pp_4 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue23 分钟前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码39 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛43 分钟前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js