前端面试题 | 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

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

每日三道前端面试题--vue 第五弹
每日三道前端面试题--vue 第五弹 DOM 渲染在哪个周期中就已经完成? 说明Vue父组件向子组件传值的方法(代码或文字描述均可)? 请列举axios的配置项及含义(五条)? DOM 渲染在哪个周期 ...
每日三道前端面试题--vue 第三弹
每日三道前端面试题--vue 第三弹 Vue常见的指令有哪些? Vue的生命周期函数有哪些?(中文及英文)? vue2.0生命周期 vue3.0生命周期 vue怎样自定义指令? 自定义指令全局注册 ...
每日三道前端面试题--vue 第二弹
每日三道前端面试题--vue 第二弹简述框架和函数库的区别? 1. 库(Library) , 代表 : jquery 2. 框架 (Framework), 代表:vue 3. 主要区别 : 控制反转 ...
每日三道前端面试题--vue 第四弹
每日三道前端面试题--vue 第四弹什么是vue的计算属性? 官方定义: 计算属性和侦听属性有什么区别?怎样选择? 两者之间的对比两者之间的区别两者之间怎样选择总结简述axios的安装和引入 ...
每日三道前端面试题--vue 第一弹
每日三道面试题--vue 第一弹 1.对vue渐进式框架的理解 2.v-if 和v-show的区别 3.MVC.MVP和MVVM的区别一.MVC 1.视图(View):用户界面. 2.控制器(Con ...
前端面试题——VUE
VUE面试题 1.v-show 和 v-if的区别,v-show 和 keep-alive 的区别答案:v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁,而不 ...
前端面试题——Vue 高频
目录一.Vue的基本原理二.双向数据绑定的原理三.MVVM.MVC.MVP的区别四.Computed 和 Watch 的区别五.Computed 和 Methods 的区别六.v-if 和 ...
前端面试题--vue
文章目录 1. vue 生命周期 2. VUE 中 computed 和 watch 的区别是什么? 3. 动态绑定类名和样式 4. v-if 与 v-show 的区别 5. v-for 列表渲染 ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...