vue 父子組件通訊詳解

時間  2019-11-10
標籤 vue 父子 組件 通訊 詳解 简体版
原文   原文鏈接

這是一篇詳細講解vue父子組件之間通訊的文章，初始學習vue的時候，老是搞不清楚幾個狀況前端

  • 經過props在父子組件傳值時，v-bind:data="data"，props接收的究竟是哪一個？
  • this.$emit提交的事件名稱，v-on:handleChange="handleChange"，和父組件監聽時候建立的方法名是否同樣？到底哪一個纔是v-on應該監聽的事件名稱？

你是否也有這樣的疑惑呢？若是你跟我有同樣的疑惑，那麼繼續往下看吧~~vue

1.建立一個父組件 Parent.vue，在data中添加一個parentAge

<template>
  <div class="my-parent">
    <h3>我是父組件</h3>
    <p>父組件的年齡是：{parentAge}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentAge: 50
    };
  }
};
</script>

<style>
.my-parent {
  text-align: left;
  text-indent: 1em;
  width: 1000px;
  height: 500px;
  border: 1px solid #555;
}
</style>

 

2.建立子組件，在data中添加一個childAge

<template>
  <div class="my-child">
    <h3>我是子組件</h3>
    <p>子組件的年齡是：{{childAge}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  }
};
</script>

<style>
.my-child {
  margin: 20px;
  width: 760px;
  height: 200px;
  border: 1px solid red;
}
</style>

3.把父子組件關聯起來，並經過v-bind（即簡寫「：」）將父組件中的parentAge值，傳遞給子組件

v-on綁定的屬性名稱deliverParentAge與data中定義的parentAge名稱能夠不同
屬性deliverParentAge經過v-bind綁定的，也是子組件中經過props接收的，而parentAge是要傳遞給子組件的數值，它是一個值
 
<template>
  <div class="my-parent">
    <h3>我是父組件，我想告訴個人子組件，個人年齡值是:{{parentAge}}</h3>
    <h3>我要經過v-bind(即簡寫":")語法糖綁定一個屬性deliverParentAge，將父組件的值傳遞到子組件中</h3>
    <!-- 下面就是個人子組件 -->
    <my-child :deliverParentAge="parentAge"></my-child>

  </div>
</template>

<script> import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  }
};
</script>

4.子組件經過props屬性，在子組件中接收父組件傳過來的值

<template>
  <div class="my-child">
    <h5>我是子組件，我能夠經過屬性props來接收父組件傳過來的年齡值是：{{deliverParentAge}}</h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
 props: { deliverParentAge: Number }
};
</script>

5.如今來修改父組件的值（這個不是真的修改而是經過this.$emit提交一個事件，將子組件的行爲告訴父組件）

<template>
  <div class="my-child">
    <h5>我是子組件，我能夠經過屬性props來接收父組件傳過來的年齡值是:{{deliverParentAge}}，這是一個數字類型</h5>
    <h5>而且，我要告訴他，他今年生日已通過了，因此他的年齡應該<button @click="AddAge">加1</button></h5>
    下面我要經過this.$emit方法提交一個事件addParentAge，告訴個人父組件，他的實際年齡
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
  props: {
    deliverParentAge: Number
  },
  // 新建一個計算屬性，將父組件原來的值加1
  computed: {
    parentActualAge() {
      return this.deliverParentAge + 1;
    }
  },
  methods: {
    AddAge() {
      this.$emit("addParentAge", this.parentActualAge);
    }
  }
};
</script>

6.父組件經過語法糖v-on（即簡寫爲「@」）來監聽子組件提交的事件addParentAge

this.$emit提交的事件名稱addParentAge，與方法handleAddParentAge名稱能夠不同
addParentAge是子組件提交的事件名稱，也是父組件經過v-on監聽的事件名稱，而handleAddParentAge是父組件自定義的方法名稱
 
<template>
  <div class="my-parent">
    <h3>我是父組件，我想告訴個人子組件，個人年齡值是:{{parentAge}}</h3>
    <h3>我要經過v-bind(即簡寫":")語法糖綁定一個屬性parentAge，告訴子組件個人年齡值是:{{parentAge}}</h3>
    <!-- 下面就是個人子組件 -->
    <my-child :deliverParentAge="parentAge" @addParentAge="handleAddParentAge"></my-child>
    <h3>經過監聽子組件提交的事件addParentAge，我知道到了本身的實際年齡應該是:{{parentAge+1}}，並經過方法handleAddParentAge，在控制檯打印出個人真實年齡</h3>

  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  },
  methods: {
    handleAddParentAge(actualAge) {
      console.log("父組件的實際年齡是：", actualAge);
    }
  }
};
</script>

 

如今來看控制檯打印出來的內容學習

7.如今將子組件data中的值，提交給父組件來看看

<template>
  <div class="my-child">
    <h5>我是子組件，我能夠經過屬性props來接收父組件傳過來的年齡值是:{{deliverParentAge}}，這是一個數字類型</h5>
    <h5>如今我要告訴父組件，個人年齡是{{childAge}},這樣他就能夠知道，咱們<button @click="DiffAge">相差</button>多少歲</h5>
    <h5>而且，我要告訴他，他今年生日已通過了，因此他的年齡應該<button @click="AddAge">加1</button></h5>
    下面我要經過this.$emit方法提交一個事件addParentAge，告訴個人父組件，他的實際年齡
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
  props: {
    deliverParentAge: Number
  },
  computed: {
    parentActualAge() {
      return this.deliverParentAge + 1;
    }
  },
  methods: {
    AddAge() {
      this.$emit("addParentAge", this.parentActualAge);
    },
    DiffAge() { this.$emit("differAge", this.childAge); }
  }
};
</script>

8.父組件經過v-on監聽子組件提交的事件differAge

<template>
  <div class="my-parent">
    <h3>我是父組件，我想告訴個人子組件，個人年齡值是:{{parentAge}}</h3>
    <h3>我要經過v-bind(即簡寫":")語法糖綁定一個屬性parentAge，告訴子組件個人年齡值是:{{parentAge}}</h3>
    <!-- 下面就是個人子組件 -->
    <my-child :deliverParentAge="parentAge" @differAge="handleDifferAge"
              @addParentAge="handleAddParentAge"></my-child>
    <h3>經過監聽子組件提交的事件addParentAge，我知道到了本身的實際年齡應該是:{{parentAge+1}}，並經過方法handleAddParentAge，在控制檯打印出個人真實年齡</h3>
    <h3>經過監聽子組件提交的事件differAge，並經過方法handleDifferAge，在控制檯打印出子組件的年齡</h3>

  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  },
  methods: {
    handleAddParentAge(actualAge) {
      console.log("父組件的實際年齡是：", actualAge);
    },
    handleDifferAge(child) { console.log("咱們的年齡差是：", this.parentAge + 1 - child); }
  }
};
</script>

如今來看看頁面展現的效果和控制檯打印出來的信息this

 

下面貼上完整的代碼spa

// Parent.vue
<template>
  <div class="my-parent">
    <h3>我是父組件，我想告訴個人子組件，個人年齡值是:{{parentAge}}</h3>
    <h3>我要經過v-bind(即簡寫":")語法糖綁定一個屬性parentAge，告訴子組件個人年齡值是:{{parentAge}}</h3>
    <!-- 下面就是個人子組件 -->
    <my-child :deliverParentAge="parentAge"
              @differAge="handleDifferAge"
              @addParentAge="handleAddParentAge"></my-child>
    <h3>經過監聽子組件提交的事件addParentAge，我知道到了本身的實際年齡應該是:{{parentAge+1}}，並經過方法handleAddParentAge，在控制檯打印出個人真實年齡</h3>
    <h3>經過監聽子組件提交的事件differAge，並經過方法handleDifferAge，在控制檯打印出子組件的年齡</h3>

  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  },
  methods: {
    handleAddParentAge(actualAge) {
      console.log("父組件的實際年齡是：", actualAge);
    },
    handleDifferAge(child) {
      console.log("咱們的年齡差是：", this.parentAge + 1 - child);
    }
  }
};
</script>

<style lang="stylus" scoped>
.my-parent {
  text-align: left;
  text-indent: 1em;
  width: 1000px;
  height: 500px;
  border: 1px solid #555;
}
</style>
// Child.vue
<template>
  <div class="my-child">
    <h5>我是子組件，我能夠經過屬性props來接收父組件傳過來的年齡值是:{{deliverParentAge}}，這是一個數字類型</h5>
    <h5>如今我要告訴父組件，個人年齡是{{childAge}},這樣他就能夠知道，咱們<button @click="DiffAge">相差</button>多少歲</h5>
    <h5>而且，我要告訴他，他今年生日已通過了，因此他的年齡應該<button @click="AddAge">加1</button></h5>
    下面我要經過this.$emit方法提交一個事件addParentAge，告訴個人父組件，他的實際年齡
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
  props: {
    deliverParentAge: Number
  },
  computed: {
    parentActualAge() {
      return this.deliverParentAge + 1;
    }
  },
  methods: {
    AddAge() {
      this.$emit("addParentAge", this.parentActualAge);
    },
    DiffAge() {
      this.$emit("differAge", this.childAge);
    }
  }
};
</script>

<style>
.my-child {
  margin: 20px;
  width: 760px;
  height: 200px;
  border: 1px solid red;
}
</style>

但願對你有用，歡迎提問與指正，一塊兒學習前端呀！code

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程