vue組件傳值的示例分析

這篇文章主要為大家展示了“vue組件傳值的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue組件傳值的示例分析”這篇文章吧。

前言

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

實現思路

• 父傳子： 在父組件中給子組件標簽上綁定一個屬性， 屬性上掛載需要傳遞的值，在子組件通過 props:['自定義屬性名'] 來接收數據。

• 子傳父： 在子組件中自定義一個事件，調用這個事件后，子組件通過 this.$emit('自定義事件名',要傳遞的數據) 發送父組件可以監聽的數據，最后父組件監聽子組件事件，調用事件并接收傳遞過來的數據。

實例1：父傳子

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

父組件 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的數據",//要傳遞給子組件1的數據
      dataList:"我是傳遞給子組件2的數據",//要傳遞給子組件2的數據
    };
  },
  //一定要注冊組件
  components: {   
    Child,
    Electronic,
  },
};
</script>

子組件1 seed.vue

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

子組件2 sons.vue

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

實現效果

1. 當 typeCode 為 “0” 時，頁面內容如下：

2. 當 typeCode 為 “1” 時，頁面內容如下：

實例2：子傳父

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

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); //參數1：自定義事件；參數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); //參數1：自定義事件；參數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>

實現效果

1. 當 typeCode 為 “0” 時，頁面內容如下：

2. 當 typeCode 為 “1” 時，頁面內容如下：

以上是“vue組件傳值的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！