Vue组件之间的传值
vue组件之间的传值大致分为三种：父组件给子组件传值，子组件给父组件传值，兄弟组件之间传值
本文主要介绍vue组件之间简单的数据传递，如果组件之间传递的数据比较复杂，建议使用vue的状态管理模式 vuex
父组件给子组件传值
1.父组件通过props给子组件传值
props 就是父组件给子组件标签上定义的属性，用来接收父组件传递的数据，props 的值可以是字符串数组，也可以是各自的名称和类型，用法和 data 中的数据用法一样，在子组件中只能使用该值，不能修改
父组件vue文件：
<template> <div> //父组件自定义msg属性给子组件传值 <Child :msg="msg"></Child> </div></template><script>import Child from "@/components/Child"export default { data() { return { msg: "父组件传给子组件的值" } }, components: { Child }}</script><style scoped></style>
子组件vue文件：
<template> <div> {{msg}} </div></template><script>export default { //子组件通过props接收父组件的传值 props: ["msg"], data() { return { } }}</script><style scoped></style>
2.父组件通过$ref给子组件传值
ref 用于给元素或子组件注册引用信息，引用信息将会注册在父组件的
对象上，父组件通过ref 获取到在子组件里定义的属性和方法，通过调用方法给子组件传递数据
父组件vue文件：
<template> <div> <Child ref="child"></Child> </div></template><script>import Child from "@/components/Child"export default { data() { return { msg: "父组件传给子组件的值" } }, mounted() { //父组件通过ref属性调用子组件的方法 this.$refs.child.getMsg(this.msg) }, components: { Child }}</script><style scoped></style>
子组件vue文件：
<template> <div> {{msg}} </div></template><script>export default { data() { return { msg: " } }, methods: { //子组件获取父组件值的方法 getMsg(val) { this.msg = val } }}</script><style scoped></style>
3.父组件通过$children给子组件传值
为当前组件的直接子组件，是一个无序的数组，父组件通过 children 访问子组件并传递数据，$ children 并不保证顺序，也不是响应式的，如果能清楚的知道子组件的顺序，可以使用下标来操作对应的子组件
父组件vue文件：
<template> <div> <Child ref="child"></Child> </div></template><script>import Child from "@/components/Child"export default { data() { return { msg: "父组件传给子组件的值" } }, mounted() { //父组件通过$children[0]访问对应子组件 this.$children[0].msg = this.msg }, components: { Child }}</script><style scoped></style>
子组件vue文件：
<template> <div> {{msg}} </div></template><script>export default { data() { return { msg: "" } }}</script><style scoped></style>
4.父组件通过provide/inject给子孙组件传值
provide/inject 组合以允许一个祖先组件向其所有子孙后代组件注入一个依赖（属性和方法），不论组件层次有多深，并在其上下游关系成立的时间里始终生效，从而实现跨级父子组件通信，主要在开发高阶插件/组件库时使用
父组件vue文件：
<template> <div> <Child></Child> </div></template><script>import Child from "@/components/Child"export default { data() { return { } }, //父组件通过provide方法向子孙组件提供值 provide() { return { msg: "父组件提供给子孙组件的值" } }, components: { Child }}</script><style scoped></style>
子孙组件vue文件：
<template> <div> {{msg}} </div></template><script>export default { //子孙组件通过inject注入父组件提供的值 inject: ['msg'], data() { return { } }}</script><style scoped></style>
props和$ref和$children和provide/inject的主要区别：
props 侧重于数据的传递，并不能获取子组件里的属性和方法，适用于自定义内容的使用场景
$ref 侧重于获取子组件里的属性和方法，并不是太适合传递数据，并且 ref 常用于获取dom元素，起到选择器的作用
$children 侧重于获取所有的直接子组件，得到的是一个无序的数组，并不太适合向多个子组件传递数据
provide/inject 侧重于在开发高阶插件/组件库时使用，并不推荐用于普通应用程序代码中
子组件给父组件传值
1.子组件通过触发$emit事件给父组件传值
$emit 的第一个参数为自定义的事件，第二个参数为要传递给父组件的值，父组件在子组件标签上绑定自定义事件来接收子组件传递的数据
子组件vue文件：
<template> <div> <button @click="sendMsg">子组件传值给父组件</button> </div></template><script>export default { data() { return { msg: "子组件传给父组件的值" } }, methods: { //子组件通过$emit触发自定义事件给父组件传值 sendMsg() { this.$emit("getMsg", this.msg); } }}</script><style scoped></style>
父组件vue文件：
<template> <div> //父组件通过绑定自定义事件接收子组件的传值 <Child @getMsg="getData"></Child> <p>{{msg}}</p> </div></template><script>import Child from "@/components/Child";export default { data() { return { msg: "" } }, methods: { getData(data) { this.msg = data } }, components: { Child }}</script><style scoped></style>
2.子组件通过$parent给父组件传值
$parent 可以用来从一个子组件访问父组件并传递数据
子组件vue文件：
<template> <div> <button @click="sendMsg">子组件传值给父组件</button> </div></template><script>export default { data() { return { msg: "子组件传给父组件的值" } }, methods: { //子组件通过$parent访问父组件 sendMsg() { this.$parent.msg = this.msg } }}</script><style scoped></style>
父组件vue文件：
<template> <div> <Child></Child> <p>{{msg}}</p> </div></template><script>import Child from "@/components/Child";export default { data() { return { msg: "" } } components: { Child }}</script><style scoped></style>
兄弟组件之间传值
兄弟之间传值通过eventBus
eventBus 就是一个vue实例来作为全局的事件总线，兄弟组件之间通过 eventBus.
和
emit 注册触发事件来传递数据
新建一个vue实例 eventBus.js
import Vue from "vue"export default new Vue()
父组件vue文件：
<template> <div> //子组件A <ChildA></ChildA> //子组件B <ChildB></ChildB> </div></template><script></script><style scoped></style>
子组件A vue文件：
<template> <div> <button @click="sendMsg">子组件A传值给子组件B</button> </div></template><script>import eventBus from '../eventBus.js'export default { data() { return { msg: "子组件A传给子组件B的值" } }, methods: { sendMsg() { //子组件A通过eventBus.$emit触发自定义事件给子组件B传值 eventBus.$emit("getMsg", this.msg); } }}</script><style scoped></style>
子组件B vue文件：
<template> <div> {{msg}} </div></template><script>import eventBus from '../eventBus.js'export default { data() { return { msg: "" } }, created() { this.getData() }, methods: { getData() { //子组件B通过eventBus.$on注册自定义事件接收子组件A的传值 eventBus.$on("getMsg", (data) => { this.msg = data }) } }}</script><style scoped></style>