父子组件传值的几种方法

一 Prop 向子组件传递数据，$emit监听子组件事件

//子组件
Vue.component('Child', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

//父组件调用
<Child title="My journey with Vue"></Child>

//子组件
<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

//父组件调用
<Child
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></Child>

二 插槽 prop 将插槽转换为可复用的模板，通过prop进行传值

//子组件
<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--我们为每个 todo 准备了一个插槽，    将 `todo` 对象作为一个插槽的 prop 传入。 -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

//父组件
<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    {{ todo.text }}
  </template>
</todo-list>

三 $parent $refs

• $refs
  通过 ref 这个 attribute 为子组件赋予一个 ID 引用

//子组件
<base-input ref="usernameInput"></base-input>

父组件通过this.$refs.usernameInput获取到 DOM 元素和子组件实例

• $parent
  $parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式

四 依赖注入

provide 选项允许父组件指定想要提供给后代组件的数据/方法

//父组件 
provide: function () {
  return {
    getMap: this.getMap
  }
}

在任何后代组件里，都可以使用 inject 选项来接收指定的想要添加在这个实例上的 property

//子组件
inject: ['getMap']

五 vuex

状态管理–vuex