Vue常见的几种组件传值方式

组件系统是 Vue.js 其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用。在 Vue.js 应用程序开发过程中常常需要处理组件传值的问题，下面详细列举几种常见的组件传值方法。

1. props
父组件代码:

<template>
  <child-component title="子组件标题"></child-component> // 传输静态值
  <child-component v-bind:title="title"></child-component> // 传输动态值
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: { ChildComponent },
  data() {
    return {
      title: '子组件标题'
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<template>
  <h1>{{title}}</h1>
</template>

<script>
export default {
  props: ['title']
}
</script>

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

2. vm.$refs
适用于父组件获取子组件的值。
父组件代码：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildProp()">获取子组件的属性的值</button>
    <button @click="getChildMethod()">获取子组件的方法</button>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
  components:{ ChildComponent },
  methods: {
    getChildProp () {
      alert(this.$refs.child.msg) // 子组件child的值
    },
    getChildMethod () {
      this.$refs.child.func() // 子组件child的方法
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<template>
	<div></div>
</template>

<script>
export default {
  data () {
    return {
      msg: "子组件child的值"
    }
  },
  methods: {
    func () {
      alert("子组件child的方法")
    }
  }
}
</script>

注意：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

3. vm.$parent
适用于子组件获取父组件的值。

父组件代码：

<template>
  <child-component></child-component>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
  components:{ ChildComponent },
  data () {
    return {
      title: '标题'
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<script>
export default {
  created () {
    alert(this.$parent.title) // 标题
  }
}
</script>

4. vm.$emit(eventName, […args])

适用于子组件向父组件传值，子组件可以通过触发父组件事件传递参数。

父组件代码：

<template>
  <child-component v-on:handleClick="handleEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: { ChildComponent },
  methods: {
    handleEvent (value) {
      alert(value) // 'abc'
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<template>
  <button v-on:click="handleClickEvent"></button>
</template>

<script>
export default {
  methods: {
    handleClickEvent () {
      this.$emit('handleClick', 'abc')
    }
  }
}
</script>

5.vm.emit/vm.$on
适用于父子组件及兄弟组件传值。

通过 $emit 触发当前实例上的事件，并将参数传递给监听器,通过 $on监听当前实例上的自定义事件。下面介绍通过vm.$emit / vm.$on 实现兄弟组件传值：

main.js代码：

import Vue from 'vue'
import App from './App.vue'
var bus = new Vue() // 定义公共实例
export default bus

new Vue({
  render: h => h(App),
}).$mount('#app')

父组件 App.vue 代码：

<template>
  <div>
    <child-one></child-one>
    <child-two></child-two>
  </div>
</template>

<script>
import ChildOne from './components/ChildOne.vue'
import ChildTwo from './components/ChildTwo.vue'
export default {
  components:{ ChildOne, ChildTwo }
}
</script>

子组件 ChildOne.vue 代码：

<template>
  <button @click="btnClick">点击按钮</button>
</template>

<script>
import bus from '../main.js'
export default {
  methods: {
    btnClick () {
      bus.$emit('getTitle', '标题')
    }
  }
}
</script>

子组件 ChildTwo.vue 代码：

<template>
  <div></div>
</template>

<script>
import bus from '../main.js'
export default {
  mounted () {
    bus.$on('getTitle', (value) => {
      alert(value) // 标题
    })
  }
}
</script>

注意： vm.$emit/vm.$on 自定义事件必须是在一个公共的实例上才能触发。

6. provide / inject
适用于祖先组件向其所有子孙后代组件传值。

祖先组件通过 provide 定义变量后，无论组件层次有多深，它的子孙后代组件都能够通过 inject 获取变量值。

父组件代码：

<template>
  <child></child>
</template>

<script>
import Child from './Child.vue'
export default {
  provide: { title: "标题" },
  components:{ Child }
}
</script>

子组件 Child.vue 代码：

<template>
  <div>
    {{title}} // 标题
    <grandson></grandson>
  </div>
</template>

<script>
import Grandson from './Grandson.vue'
export default {
  inject: ['title'],
  components:{ Grandson }
}
</script>

子组件的子组件 Grandson.vue 代码：

<template>
  <div>{{title}}</div> // 标题
</template>

<script>
export default {
  inject: ['title']
}
</script>

注意：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

7. 路由
通过路由地址参数传值，适用于组件路由切换场景

路由传参的方式有多种，详细信息可以查看 Vue Router 官网，下面简单介绍一种：

跳转前的组件相关代码：

this.$router.push({
  path: '/App',
  query: {
    title: '标题'
  }
})

对应路由相关配置：

{
  path: '/app',
  name: 'App',
  component: App

跳转后组件调用方法：

this.$route.query.title // 标题

注意：避免敏感数据通过路由地址传参显示在页面url后面。

8. localStorage / sessionStorage
适用于组件间任意传值，常用于存储客户端临时信息。

localStorage 生命周期是永久的，可以实现同一浏览器下不同窗口传值。而 sessionStorage 的生命周期为当前窗口或标签页，一旦窗口或标签页关闭，通过 sessionStorage 存储的信息则会被清空。以 localStorage 为例：
组件存储信息调用方法：

var obj = {'title': '标题'}
localStorage.setItem('info', JSON.stringify(obj));

组件获取信息调用方法：

var info = JSON.parse(localStorage.getItem('info')) // {'title': '标题'}

9. Vuex
适用于组件间任意传值，常用于开发大型页面应用中。
Vuex 是专为 Vue.js 应用程序开发的状态管理器，可以简单理解为一个全局变量，在 Vuex 中定义的变量可以被各个组件使用。但是我们不能像传统 JS 的那种直接赋值形式来修改，我们必须得按照 Vuex 给我们提供的规则来修改。