話(huà)不多說(shuō)，下面進(jìn)入實(shí)戰(zhàn)

實(shí)例1：父?jìng)髯?/h2>

本篇小實(shí)例主要是模擬父組件向不同子組件傳遞不同數(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",//通過(guò)"0" "1"判斷顯示哪個(gè)頁(yè)面；0：子組件1頁(yè)面；1：子組件2頁(yè)面
      informtion:"我是傳遞給子組件1的數(shù)據(jù)",//要傳遞給子組件1的數(shù)據(jù)
      dataList:"我是傳遞給子組件2的數(shù)據(jù)",//要傳遞給子組件2的數(shù)據(jù)
    };
  },
  //一定要注冊(cè)組件
  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, //驗(yàn)證類(lèi)型，也可以驗(yàn)證其他類(lèi)型
      default: "", //如果父組件傳值，則用父組件的值渲染，反之使用默認(rèn)值
    },
  },
  mounted() {
    console.log(this.message); //父組件傳遞過(guò)來(lái)的數(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, //驗(yàn)證類(lèi)型，也可以驗(yàn)證其他類(lèi)型
      default: "", //如果父組件傳值，則用父組件的值渲染，反之使用默認(rèn)值
    },
  },
  mounted() {
    console.log(this.message); //父組件傳遞過(guò)來(lái)的數(shù)據(jù)
    // 賦值操作
    let str = this.message;
    this.dataList = str;
  },
};
</script>

實(shí)現(xiàn)效果

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

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

實(shí)例2：子傳父

本篇小實(shí)例主要是模擬不同子組件向父組件傳遞數(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", //通過(guò)"0" "1"判斷顯示哪個(gè)頁(yè)面；0：子組件1頁(yè)面；1：子組件2頁(yè)面
    };
  },
  //一定要注冊(cè)組件
  components: {
    Child,
    Electronic,
  },
  methods: {
    seedAccept(data) {
      console.log(data, "子組件1傳給父組件的值");
    },
    sonsAccept(data) {
      console.log(data, "子組件2傳給父組件的值");
    },
  },
};
</script>

實(shí)現(xiàn)效果

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

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!