vue3 在自定义组建上使用v-model 绑定input输入框

最新推荐文章于 2024-04-18 16:58:47 发布

jjw_zyfx

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量1k

点赞数

分类专栏： vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/129639871

版权

前端同时被 2 个专栏收录

296 篇文章 0 订阅

订阅专栏

vue

138 篇文章 1 订阅

订阅专栏

1、话不多说直接看代码：新建一个helloworld的子组件内容如下

<template>
  <input  :value="modelValue" @input="inputChange">
</template>
<script setup>
const porps = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const inputChange=(e)=>{
  emit('update:modelValue', e.target.value)
}
</script>
<style scoped lang="less">
input {
  width: 200px;
  height: 30px;
  border: 1px solid black;
}
</style>

2、在父组件中导入并使用如下：

<template>
  <HelloWorld v-model="num" ></HelloWorld>
</template>


<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
import {ref, watch} from "vue";
const num = ref(0)
watch(num, (newVal)=>{  
  // 监听看是否父组件改变了
  console.log('newVal: ', newVal);
})
<script>