vue3?中v-model語法糖示例詳解

更新時間：2024年06月25日 14:51:49 作者：寶子卡粉

vue3中的v-model相當于vue2中的v-model和v-bind.sync 修飾符組合在一起的產(chǎn)物（擇優(yōu)整合）v-bind.sync 在 vue3 中被移除了可以在組件標簽上使用多個 v-model 綁定屬性,使用參數(shù)區(qū)分,這篇文章主要介紹了vue3?中v-model語法糖,需要的朋友可以參考下

一、 vue2 中 v-model 語法糖

實現(xiàn)父子組件雙向數(shù)據(jù)綁定，一個輸入框或者組件指定綁定一個 v-model

1. 父組件寫法

<template>
  <div>
    <h1>App</h1>
    <h2>{{ count }}</h2>
    <input type="text" v-model="count" />
    <!-- 展開寫法，@input中的 count 的值來自當前輸入框事件 -->
    <input type="text" :value="count" @input="count = $event.target.value" />
    <hr />
    <Children v-model="count"></Children>
    <!-- 展開寫法，@input中的 count 的值來自子組件輸入框中的值 $event.target.value -->
    <Children :value="count" @input="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
export default {
  components: {
    Children,
  },
  data() {
    return {
      count: "1",
    };
  },
};
</script>

2. 子組件寫法

<template>
  <div>
    <h1>main</h1>
    <div>{{ value }}</div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
    },
  },
};
</script>

二、 vue2 的 v-bind.sync 修飾符語法糖，實現(xiàn)父子組件雙向數(shù)據(jù)綁定

注意：子組件標簽中可以同時使用多個 .sync 修飾符

1. 在父組件中

<template>
  <div>
    <h1>App</h1>
    <input v-model="count" type="text" />
    <hr />
    <Children :count.sync="count"></Children>
    <!-- 展開寫法，@update:value中的 count 的值來自子組件輸入框中的值 $event.target.value -->
    <Children :count="count" @update:count="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
export default {
  components: {
    Children,
  },
  data() {
    return {
      count: "1",
    };
  },
};
</script>

2. 在子組件中

<template>
  <div>
    <h1>main</h1>
    <h2>{{ count }}</h2>
    <input
      type="text"
      :value="count"
      @input="$emit('update:count', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: String,
    },
  },
};
</script>

三、 vue3 的 v-model 語法糖

vue3 中的 v-model 相當于 vue2 中的 v-model 和 v-bind.sync 修飾符組合在一起的產(chǎn)物（擇優(yōu)整合）v-bind.sync 在 vue3 中被移除了可以在組件標簽上使用多個 v-model 綁定屬性，使用參數(shù)區(qū)分

1. 在父組件中

<template>
  <div>
    <h1>App</h1>
    <h2>{{ count }}</h2>
    <input type="text" v-model="count" />
    <!-- 此展開寫法，僅限于輸入框 -->
    <input type="text" :value="count" @input="count = $event.target.value" />
    <hr />
    <Children v-model:count="count"></Children>
    <!-- 此展開寫法，僅限于組件 -->
    <Children :count="count" @update:count="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
import { ref } from "vue";
export default {
  components: {
    Children,
  },
  setup() {
    const count = ref("1");
    return { count };
  },
};
</script>

2. 在子組件中

<template>
  <div>
    <h1>main</h1>
    <div>{{ count }}</div>
    <label>
      count：<input
        type="text"
        :value="count"
        @input="emit('update:count', $event.target.value)"
      />
    </label>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: String,
    },
  },
  setup(props, { emit }) {
    console.log(props);
    return { emit };
  },
};
</script>

到此這篇關(guān)于vue3 中v-model語法糖的文章就介紹到這了,更多相關(guān)vue3 v-model語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: