快捷導(dǎo)航

vue如何自定義組件v-model

更新時間：2023年07月27日 09:23:37 作者：不努力code

這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue自定義組件v-model

官網(wǎng)的話

允許一個自定義組件在使用 v-model 時定制 prop 和 event。

默認(rèn)情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達到不同的目的。

使用 model 選項可以回避這些情況產(chǎn)生的沖突。

效果

父組件：

<template>
  <view class="index">
      我是父級組件{{msg}}
      <!-- 相當(dāng)于：  <node :value="msg" @input="v=>msg=v"></node>-->
      <node v-model="msg"></node>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
import node from"./node.vue"
export default Vue.extend({
  components:{
    node
  },
  data() {
    return {
      msg:"abc",
    };
  },
  mounted() {
    // uni.navigateTo({
    //   url: "/pages/login/login",
    // });
  },
});
</script>
<style scoped>
.index{
  border: solid 1px orange;
}
</style>

子組件

<template>
  <view class="node">
    <text>我是子級組件</text>
    <el-input v-model="result" placeholder="請輸入內(nèi)容"></el-input>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    value: {
      type: [String, Number],
    },
  },
  data() {
    return {};
  },
  computed: {
    result: {
      get(): string | number {
        return this.value;
      },
      set(v: string | number) {
        console.log("我執(zhí)行了");
        this.$emit("input", v);
      },
    },
  },
});
</script>
<style scoped>
.node {
  margin: 50px 0;
  width: 500px;
  border: solid black 2px;
}
</style>

如果要想自定義value的名字和事件名，修改一下字組件即可，如：

<template>
  <view class="node">
    <text>我是子級組件</text>
    <el-input v-model="result" placeholder="請輸入內(nèi)容"></el-input>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
    model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: [String, Number],
    },
  },
  data() {
    return {};
  },
  computed: {
    result: {
      get(): string | number {
        return this.modelValue;
      },
      set(v: string | number) {
        console.log("我執(zhí)行了");
        this.$emit("change", v);
      },
    },
  },
});
</script>
<style scoped>
.node {
  margin: 50px 0;
  width: 500px;
  border: solid black 2px;
}
</style>

vue2與vue3在自定義組件v-model上的區(qū)別

在vue開發(fā)中，通常會對一個自定義的組件進行封裝，并實現(xiàn)v-model雙向綁定功能

在 Vue 2 中，通常這樣實現(xiàn)

父組件

<template>
? <Child v-model="number"></Child> ? ?
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? number: 0
? ? ? }
? ? },
? ? components: {
? ? ? Child: () => import("./Child.vue")
? ? }
? }
</script>

子組件

<template>
? <button @click="handleClick">{{ value }}</button>
</template>
<script>
? export default {
? ? props: {
? ? ? value: Number
? ? },
? ? methods: {
? ? ? handleClick() {
? ? ? ? // 通過emit一個input事件出去，實現(xiàn) v-model
? ? ? ? this.$emit('input', this.value + 1)
? ? ? }
? ? }
? }
</script>

在 vue 3 中，通過這樣實現(xiàn)

父組件

<template>
? <Child v-model="number"></Child> ? ?
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
? setup() {
? ? const number = ref(0);
? ? return {
? ? ? number
? ? };
? },
});
</script>

子組件

<template>
? <button @click="handleClick">{{ value }}</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
? props: {
? ? // 更換成了 modelValue
? ? modelValue: Number
? },
? setup(props, { emit }) {
? ? // 關(guān)閉彈出層
? ? const handleClick = () => emit('update:modelValue', props.modelValue + 1);
? ? return { handleClick };
? },
});
</script>