快捷導(dǎo)航

Vue2子組件綁定 v-model,實(shí)現(xiàn)父子組件通信方式

更新時(shí)間：2023年04月20日 10:10:25 作者：潮汐未見(jiàn)潮落

這篇文章主要介紹了Vue2子組件綁定 v-model,實(shí)現(xiàn)父子組件通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前言

v-model 可以在組件上使用以實(shí)現(xiàn)雙向綁定。

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

<input v-model="firstName" />

在代碼背后，模板編譯器會(huì)對(duì) v-model 進(jìn)行更冗長(zhǎng)的等價(jià)展開(kāi)。因此上面的代碼其實(shí)等價(jià)于下面這段：

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

默認(rèn)用法

父組件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <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: {
    // 默認(rèn)用法
    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>

以上就可以實(shí)現(xiàn) 父子組件的雙向綁定

.sync寫(xiě)法

傳參的時(shí)候加上 .sync 會(huì)簡(jiǎn)化上面的寫(xiě)法，父組件不需要定義更新觸發(fā)函數(shù)（update）

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

會(huì)被擴(kuò)展為：

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

當(dāng)子組件需要更新 firstName 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：

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

父組件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <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>

以上也可以實(shí)現(xiàn) 父子組件的雙向綁定

綁定單個(gè) v-model

當(dāng)使用在一個(gè)組件上時(shí)，v-model 會(huì)被展開(kāi)為如下的形式：

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

父組件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <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>

現(xiàn)在可以實(shí)現(xiàn)單個(gè) 輸入框綁定