快捷導(dǎo)航

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

更新時間：2023年04月20日 10:10:25 作者：潮汐未見潮落

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

前言

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

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

<input v-model="firstName" />

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

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

默認用法

父組件

<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: {
    // 默認用法
    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>

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

.sync寫法

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

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

會被擴展為：

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

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

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>

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

綁定單個 v-model

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

 <UserName v-model="first"  />
 <!-- 上面等同于下面的寫法 -->
<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)在可以實現(xiàn)單個輸入框綁定