Vite中使用 Model绑定组件值

简介: Vite中使用 Model绑定组件值
<MyDialog class="audit-dialog-wrapper" :title="dialogTitle" v-model="isDialogVisible" size="small" width="450px" :need-modal="needModal" @update:isShow="isShow">
      <div>23233</div>
      <template #footer>
        <div class="dialog-footer">
          <my-button type="close" title="取消" @click="closeDialog" />
          <my-button type="submit" title="确认" @click="submit" />
        </div>
      </template>
</MyDialog>

使用

v-model="isDialogVisible"

组件内

const props = defineProps(
  ['modelValue']
)


const emit = defineEmits( ['update:modelValue'] )
const closed = () => {
  emit( 'update:modelValue' )
}

script setup 的语法中,需要使用 modelValue 接收父组件传入的值。

用 update:modelValue 向上作为向上触发事件的事件名。

相关文章
|
2月前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
219 10
|
29天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
66 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
28天前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
114 0
|
4月前
vue2 自定义 v-model (model选项的使用)
vue2 自定义 v-model (model选项的使用)
709 1
|
4月前
|
JavaScript
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
41 1
|
4月前
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
152 0
|
6月前
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
603 2
|
6月前
vue2 系列:自定义 v-model
vue2 系列:自定义 v-model
134 0
|
6月前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值