前端面试题 | VUE组件传值，VUEX怎样传值的？

一、父子组件传值

父子组件传值使用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接收传递过来的数据

（二）使用vuex(后续会有更新~，点个关注)vuex