Vue2子組件怎么綁定v-model實現父子組件通信

本篇內容介紹了“Vue2子組件怎么綁定v-model實現父子組件通信”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

前言

v-model 可以在組件上使用以實現雙向綁定。

首先讓我們回憶一下 v-model 在原生元素上的用法：

<input v-model="firstName" />

在代碼背后，模板編譯器會對 v-model 進行更冗長的等價展開。因此上面的代碼其實等價于下面這段：

<input
  :value="firstName"
  @input="firstName = $event.target.value"
/>

默認用法

父組件

<template>
  <div>
    <h2>{{ first }}-{{ last }}</h2>
    <UserName
      :firstName="first"
      :lastName="last"
      @update:firstName="func1"
      @update:lastName="func2"
    />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    // 默認用法
    func1(val) {
      this.first = val;
    },
    func2(val) {
      this.last = val;
    },
  },
};
</script>

子組件

<template>
  <div>
    <input v-model="first" type="text" @input="input1" />
    <input v-model="last" type="text" @input="input2" />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  props: ["firstName", "lastName"],
 
  data() {
    return {
      first: this.firstName,
      last: this.lastName,
    };
  },
  methods: {
    input1() {
      this.$emit("update:firstName", this.first);
    },
    input2() {
      this.$emit("update:lastName", this.last);
    },
  },
};
</script>

以上就可以實現 父子組件的雙向綁定

.sync寫法

傳參的時候加上 .sync 會簡化上面的寫法，父組件不需要定義更新觸發函數（update）

 <UserName :firstName.sync="first" />

會被擴展為：

<UserName :firstName="first" @update:firstName="val => first = val"></UserName>

當子組件需要更新 firstName 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:firstName', newValue)

父組件

<template>
  <div>
    <h2>{{ first }}-{{ last }}</h2>
    <UserName :firstName.sync="first" :lastName.sync="last" />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
 
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
   
  },
};
</script>

子組件

<template>
  <div>
    <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
    <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName", "lastName"],
  data() {
    return {};
  },
  methods: {},
};
</script>

以上也可以實現 父子組件的雙向綁定

綁定單個 v-model

當使用在一個組件上時，v-model 會被展開為如下的形式：

 <UserName v-model="first"  />
 <!-- 上面等同于下面的寫法 -->
<UserName
  :modelValue="first"
  @input="first= $event.target.value"
/>

父組件

<template>
  <div>
    <h2>{{ first }}-{{ last }}</h2>
    <UserName v-model="first"  />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
 
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    
  },
};
</script>

子組件

<template>
  <div>
    <input
      type="text"
      :value="firstName"
      @input="$emit('update', $event.target.value)"
    />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName"],
  model: {
    prop: "firstName",
    event: "update",
  },
 
  data() {
    return {};
  },
};
</script>

現在可以實現單個 輸入框綁定

“Vue2子組件怎么綁定v-model實現父子組件通信”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！