【Vue3练习】Vue3使用v-model以及多个v-model
2023-12-17 23:54:14
注意事项:Vue3里面v-model对应的事件名称不能随便取了,必选是update:后面接对象的绑定值(父组件传入的值)
父组件:
<script setup >
import { ref} from 'vue';
import MyInput from "./components/cz-input.vue";
const valueOne = ref(100);
const valueTwo = ref(200);
</script>
<template>
<div>v-model
<div class="fa">父组件value--{{valueOne}}
<!-- 多个v-model在冒号后面接需要绑定的值,冒号后面的值需要同子组件的props值名称对应 -->
<MyInput v-model="valueOne" @update:modelValue="change" v-model:modelValueTwo="valueTwo"></MyInput>
</div>
</div>
</template>
子组件:
<script setup >
import { ref} from "vue";
let props = defineProps({"modelValue":Number,"modelValueTwo":Number});
const $emit = defineEmits(["update:modelValue","update:modelValueTwo"]);
const changeValue = (e) => {
$emit("update:modelValue",props.modelValue+1);
$emit("update:modelValueTwo",props.modelValueTwo+1);
};
</script>
<template>
<div>
子组件valueOne---{{ modelValue }}
子组件valueTwo---{{ modelValueTwo }}
<el-button type="primary" @click="changeValue">变化</el-button>
</div>
</template>
文章来源:https://blog.csdn.net/weixin_52941842/article/details/135051951
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!