vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件
1. vue2 自定义组件的 v-model
- vue2官网，自定义组件
- 官方解释：
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 - 上代码
- 代码中使用了 element-ui
子组件 使用默认 value 和input 事件
// dialog.vue
<template>
<el-dialog
title="提示"
:visible.sync="value"
width="30%"
:before-close="handleClose"
>
<span>2222222</span>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: () => false,
},
},
methods: {
// 取消
handleClose() {
// 弹窗关闭 默认的event事件为 input
this.$emit("input", false);
},
// 提交
submit() {
},
},
};
</script>
父组件使用
<template>
<div>
<el-button type="primary" @click="visible = true">打开弹窗</el-button>
<Dialog v-model="visible"></Dialog>
</div>
</template>
<script>
import Dialog from "@/components/dialog.vue";
export default {
components: {
Dialog,
},
data() {
return {
visible: false,
};
},
methods:{
changeDialog(data){
console.log(data)
this.text = data
},
}
};
</script>
- 官方解释后半段：
自定义 prop 和 事件名像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免
子组件
<template>
<el-dialog
title="提示"
:visible.sync="visible"
width="30%"
:before-close="handleClose"
>
<span>2222222</span>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
model: {
prop: "visible",
event: "update", // 为了避免事件名称冲突 此处可以自定义方法名
},
props: {
visible: {
type: Boolean,
default: () => false,
},
},
data() {
return {
};
},
methods: {
// 取消
handleClose() {
// 使用自定义方法名 和上面这行代码效果一致
this.$emit("update", false);
},
// 提交
submit() {
},
},
};
</script>
父组件
<template>
<div>
<el-button type="primary" @click="visible = true">打开弹窗</el-button>
<Dialog v-model="visible"></Dialog>
</div>
</template>
<script>
import Dialog from "@/components/dialog.vue";
export default {
components: {
Dialog,
},
data() {
return {
visible: false,
};
},
methods:{
changeDialog(data){
console.log(data)
this.text = data
},
}
};
</script>
2. vue3 自定义组件的 v-model
- vue3官网，自定义组件
- 官方解释：
默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件 - 上代码
- 代码中使用了 element-plus
子组件 使用默认 modelValue 和 update:modelValue事件
// 子组件 dialog.vue
<template>
<el-dialog
v-model="props.modelValue"
title="Tips"
width="30%"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="submit"> 确定 </el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
// 接受数据
const props = defineProps({
modelValue: {
type: Boolean,
default: () => false,
},
});
// 注册事件
const emit = defineEmits(["update:modelValue"]);
// 关闭
const handleClose = () => {
emit("update:modelValue", false);
};
// 提交
const submit = () => {
};
</script>
父组件
<template>
<div>
<el-button text @click="visible = true"> 打开弹窗 </el-button>
<!-- 第一种方式 使用默认方式 -->
<Dialog v-model="visible"></Dialog>
</div>
</template>
<script setup lang="ts">
import Dialog from "@/components/dialog.vue";
import {
ref } from "vue";
const visible = ref(false);
</script>
- 官方解释后半段：
自定义 prop 和 事件名我们可以通过给 v-model 指定一个参数来更改这些名字
子组件
<template>
<el-dialog
v-model="props.visible"
title="Tips"
width="30%"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="submit"> 确定 </el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
// 接受数据
const props = defineProps({
visible: {
type: Boolean,
default: () => false,
},
});
// 注册事件
const emit = defineEmits(["update:visible"]);
// 关闭
const handleClose = () => {
emit("update:visible", false);
};
// 提交
const submit = () => {
};
</script>
父组件
<template>
<div>
<el-button text @click="visible = true"> 打开弹窗 </el-button>
<!-- 第二种方式 自定义props 名称为 visible -->
<Dialog v-model:visible="visible"></Dialog>
</div>
</template>
<script setup lang="ts" name="debounceDirect">
import Dialog from "@/components/dialog.vue";
import {
ref } from "vue";
const visible = ref(false);
</script>
