vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件

vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件

1. vue2 自定义组件的 v-model

1. vue2官网，自定义组件
2. 官方解释：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
3. 上代码
4. 代码中使用了 element-ui

子组件 使用默认 value 和input 事件

// dialog.vue<template><el-dialogtitle="提示":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事件为 inputthis.$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>

4. 官方解释后半段：自定义 prop 和 事件名 像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免

子组件

<template><el-dialogtitle="提示":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

1. vue3官网，自定义组件
2. 官方解释：默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件
3. 上代码
4. 代码中使用了 element-plus

子组件 使用默认 modelValue 和 update:modelValue事件

// 子组件   dialog.vue
<template><el-dialogv-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>

4. 官方解释后半段：自定义 prop 和 事件名 我们可以通过给 v-model 指定一个参数来更改这些名字

子组件

<template><el-dialogv-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>

以上就是vue2或者vue3 自定义组件 v-model 的使用！