一、$emit()、props通訊(多用於父子元件之間通訊)

　　1、父元件向子元件傳值

　　父元件引用子元件，在子元件標籤利用 v-bind 向子元件傳值　

　　<div id="app">
   　　<child :value="value"></child>
　　</div>

　　子元件通過 props 屬性接收父元件傳遞過來的引數

<template>
  <div class="child">
    {{`父 => 子傳值：${value}`}}
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

　　2、子元件向父元件傳值

　　子元件通過 $emit(“funcationName”, value) 將需要傳遞的value，通過“funcationName”對映給父元件

<template>
  <div class="child">
    <input type="text" v-model="value" @input="change">
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      value: null
    }
  },
  methods: {
    change() {
      const { value } = this;
      this.$emit('getValue', { value });
    }
  }
}
</script>

　　父元件在子元件標籤中監聽$emit()對映的方法名，通過方法傳參的形式獲取value

<template>
  <div id="app">
    <child @getValue="setValue"></child>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: "App",
  components: {
    Child
  },
  methods: {
    setValue({ value }) {
      console.log(value)
    }
  }
};
</script>

　　也可以通過$emit() 傳遞方法

　　子元件methods

    change() {
      const { myFunction } = this;
      this.$emit('getValue', { myFunction });
    },
    myFunction() {
      console.log(this)
    }

　　父元件接收

  methods: {
    setValue({ myFunction: childFunction }) {
      childFunction();
    }
  }