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 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
3月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
86 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
5月前
vue2 自定义 v-model (model选项的使用)
vue2 自定义 v-model (model选项的使用)
869 1
|
5月前
|
JavaScript
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
55 1
|
5月前
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
228 0
|
7月前
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
750 2
|
7月前
vue2 系列:自定义 v-model
vue2 系列:自定义 v-model
150 0
|
7月前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
7月前
|
JavaScript
Vue 创建自定义 ref 函数
Vue 创建自定义 ref 函数
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
179 0

热门文章

最新文章