我們在進行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>