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-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>

4. 官方解释后半段：自定义 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

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

4. 官方解释后半段：自定义 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>

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