超簡單易懂的vue組件傳值

更新時間：2022年03月01日 10:26:26 作者：水星記_

這篇文章主要為大家詳細(xì)介紹了vue組件傳值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

前言

vue中的組件傳值大家應(yīng)該都不陌生，今天用兩個簡單易懂的小案例教大家在項目中如何使用父傳子、子傳父組件之間的數(shù)據(jù)傳遞。

實現(xiàn)思路

父傳子： 在父組件中給子組件標(biāo)簽上綁定一個屬性，屬性上掛載需要傳遞的值，在子組件通過 props:['自定義屬性名'] 來接收數(shù)據(jù)。
子傳父： 在子組件中自定義一個事件，調(diào)用這個事件后，子組件通過 this.$emit('自定義事件名',要傳遞的數(shù)據(jù)) 發(fā)送父組件可以監(jiān)聽的數(shù)據(jù)，最后父組件監(jiān)聽子組件事件，調(diào)用事件并接收傳遞過來的數(shù)據(jù)。

話不多說，下面進(jìn)入實戰(zhàn)

實例1：父傳子

本篇小實例主要是模擬父組件向不同子組件傳遞不同數(shù)據(jù)的情況。

父組件 index.vue

<template>
  <!-- 父組件 -->
  <div>
    <Child :message="informtion" v-if="typeCode == '0'"></Child>
    <Electronic :message="dataList" v-if="typeCode == '1'"></Electronic>
  </div>
</template>
<script>
// 引入子組件
import Child from "./subassembly/seed.vue";
import Electronic from "./subassembly/sons.vue";
export default {
  data() {
    return {
      typeCode: "0",//通過"0" "1"判斷顯示哪個頁面；0：子組件1頁面；1：子組件2頁面
      informtion:"我是傳遞給子組件1的數(shù)據(jù)",//要傳遞給子組件1的數(shù)據(jù)
      dataList:"我是傳遞給子組件2的數(shù)據(jù)",//要傳遞給子組件2的數(shù)據(jù)
    };
  },
  //一定要注冊組件
  components: {   
    Child,
    Electronic,
  },
};
</script>

子組件1 seed.vue

<template>
  <!-- 子組件1 -->
  <h2>我是子組件1<br />接收父組件值：{{ informtion }}</h2>
</template>
<script>
export default {
  data() {
    return {
      informtion: "",//用于賦值
    };
  },
  props: {
    // message用于接收
    message: {
      type: String, //驗證類型，也可以驗證其他類型
      default: "", //如果父組件傳值，則用父組件的值渲染，反之使用默認(rèn)值
    },
  },
  mounted() {
    console.log(this.message); //父組件傳遞過來的數(shù)據(jù)
    // 賦值操作
    let str = this.message;
    this.informtion = str;
  },
};
</script>

子組件2 sons.vue

<template>
  <!-- 子組件2 -->
  <h2>我是子組件2<br />接收父組件值：{{ dataList }}</h2>
</template>
<script>
export default {
  data() {
    return {
      dataList: "",//用于賦值
    };
  },
  props: {
    // message用于接收
    message: {
      type: String, //驗證類型，也可以驗證其他類型
      default: "", //如果父組件傳值，則用父組件的值渲染，反之使用默認(rèn)值
    },
  },
  mounted() {
    console.log(this.message); //父組件傳遞過來的數(shù)據(jù)
    // 賦值操作
    let str = this.message;
    this.dataList = str;
  },
};
</script>

實現(xiàn)效果

1. 當(dāng) typeCode 為 “0” 時，頁面內(nèi)容如下：

在這里插入圖片描述

2. 當(dāng) typeCode 為 “1” 時，頁面內(nèi)容如下：

在這里插入圖片描述

實例2：子傳父

本篇小實例主要是模擬不同子組件向父組件傳遞數(shù)據(jù)的情況。

seed.vue 子組件1

<template>
  <!-- 子組件1 -->
  <button @click="seedOnclick">我是子組件1</button>
</template>
<script>
export default {
  data() {
    return {
      seedCode: "Romantic never die!", //子傳父要傳遞的值
    };
  },
  methods: {
    seedOnclick() {
      this.$emit("seed", this.seedCode); //參數(shù)1：自定義事件；參數(shù)2：要傳遞的值
    },
  },
};
</script>

sons.vue 子組件2

<template>
  <!-- 子組件2 -->
  <button @click="sonsOnclick">我是子組件2</button>
</template>
<script>
export default {
  data() {
    return {
      dataListCode: "world peace!", //子傳父要傳遞的值
    };
  },
  methods: {
    sonsOnclick() {
      this.$emit("sons", this.dataListCode); //參數(shù)1：自定義事件；參數(shù)2：要傳遞的值
    },
  },
};
</script>

index.vue 父組件

<template>
  <!-- 父組件 -->
  <div>
    <Child @seed="seedAccept" v-if="typeCode == '0'"></Child>
    <Electronic @sons="sonsAccept" v-if="typeCode == '1'"></Electronic>
  </div>
</template>
<script>
// 引入子組件
import Child from "./subassembly/seed.vue";
import Electronic from "./subassembly/sons.vue";
export default {
  data() {
    return {
      typeCode: "0", //通過"0" "1"判斷顯示哪個頁面；0：子組件1頁面；1：子組件2頁面
    };
  },
  //一定要注冊組件
  components: {
    Child,
    Electronic,
  },
  methods: {
    seedAccept(data) {
      console.log(data, "子組件1傳給父組件的值");
    },
    sonsAccept(data) {
      console.log(data, "子組件2傳給父組件的值");
    },
  },
};
</script>

實現(xiàn)效果