vue 组件之间通信的多种方案（1）

一、$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() 传递方法（vue 提供 $on 事件传递方法）

　　子组件methods

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

　　父组件接收

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