一、父子组件传值
父子组件传值使用props向子组件传递数据
子组件直接使用props接收父组件传递过来的值，接收过来的 值可以直接使用
<template><div id='logo'>{{logo}}</div></template><script>export default{props:['logo'] name:"headerdiv"data(){return{name:''}}}</script>
父组件通过v-bind将logo的值绑定为父组件里面需要传递给子组件的变量
<template><HeaderDiv :logo='logoMsg'></HeaderDiv></template><script>import HeaderDiv from './components/header'export default{name:'app',data(){return {logoMsg:"dsadssaads'}},components:{HeaderDiv}}</script>
二、子父组件传值
（一）子组件通过事件传递数据给父组件
子组件部分
当input的值发生变化的时候，将username传递给父组件，首先声明一个setuser,用change事件来调用setUser
<template><div><span></span><input v-model="username" @change="setUser"/></div></template><script>export default{name:"login",data(){return{username:''}},methods:{setUser:function(){ this.$emit('transferUser',this.username) //transferUser是自定义事件，通过this.uasername将值传递给父组件}}}</script>
父组件 getUser里面的参数就是子组件传递过来的参数
<template><div><LoginDiv @transferUser="getUser"/><span>{{user}}</span></div></template><script>export default{name:"",data(){return{user:""}},methods:{getUser(msg){this.user=msg}}}</script>
（二）第二种方法可以使用ref属性、
子组件
<template><div>{{ msg }}</div></template><script>export default {data() {return {msg: "hello world"}}}</script>
父组件
<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div></template><script>import HelloWorld from "./components/HelloWorld.vue";export default {components: {HelloWorld},data() {return {}},methods: {getHello() {console.log(this.$refs.hello.msg)}}};</script>
通过$refs可以进行传值
三、兄弟组件传值
（一）可以使用Eventbus时间总线进行父子组件之间的传值
首先创建一个单独的eventBus.js文件//Eventbus里面的内容//创建vue实例import Vue from 'vue'/向外共享Vue的实例对象export default new Vue()
创建两个子组件并且注册到父组件之中
在两个组件中分别引入bus
组件A可以将修改后的数据使用$emit发送给兄弟组件 ，兄弟组件使用$on接收传递过来的数据
