vue~父組件與子組件的交互

咱們在進行vue開發時會將公共的部分進行抽象，而後生成一個獨立的組件，這個組件能夠被其它頁面引用，若是但願有交互的動做就設計到了值的傳遞，或者方法的回調等問題，這一次咱們主要來講一下父組件和子組件的交互。

值的傳遞

子組件，經過定義了prods，而後能夠實現從父組件向子組件的傳遞：

<template>
  <div id="app">
    這是自定義的組件：{{myMessage}}
    <button @click="childClick">調用父組件的方法</button>
  </div>
</template>
<script>
export default {
  name: "testComponent",
  props: ["myMessage"],
  data() {
    return {
      message: "hello world",
      myNum: 37,
      myStr: "lind"
    };
  },
  methods: {
    childClick() {
       console.log("調用childClick");
      this.$emit("abcClick", this.myNum, this.myStr);
    }
  }
};
</script>

父組件/頁面，直接爲這個prods賦值便可，注意若是JS裏props名稱是小駝峯，在html須要用中線來代替

<testComponent my-message="hello"></testComponent> 
<script>
import testComponent from "@/components/testComponent";
export default {
  name: "test-grammer",
  props: {
    //接收父組件傳遞過來的參數
  },
  components: {
    testComponent
  }
}
</script>

方法的傳遞/回調

在父頁面綁定子組件的方法，而後子組件在某個時機去觸，這就造成了在子組件裏調用父組件的方法，使用了$emit來實現

<button @click="childClick">調用父組件的方法</button>
<script>
export default {
  name: "testComponent",
  methods: {
    childClick() {
      this.$emit("abcClick", this.myNum, this.myStr);
    }
  }
};
</script>

在父頁面中去綁定這個abcClick事件就能夠了，當在子組件調用這個childClick事件時，綁定了abcClick的方法將會被一塊兒回調

<testComponent  @abcClick="sayHello"></testComponent>
<script>
import testComponent from "@/components/testComponent";
export default {
  name: "test-grammer",
  methods: {
    sayHello(Num, Str) {
      console.log("hello world~~" + Num + Str);
    }
  },
};
</script>