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>