① vue 组件通信方式，六种方法
“阿弥陀佛，善哉善哉。”
“魔镜啊！魔镜，谁是这世界上最美丽的女人？”
“愿上帝保佑你，阿门！”
等等，这些语句是不是特别经典？特别有画面感？眼前立马浮现出家人、后母和牧师？
通过言语，可以判断一个人的职业、身份、地位。
通过特殊语句可以与神明通话，可以和精灵共舞。
（1）props / $emit 适用 父子组件通信
父组件注入，子组件接收。
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。
注意：props是单向数据流，既只能从父级传到子级，如果想要达到双向，子级能够修改父级，则需要给props加sync修饰符。(文章后部分有详细介绍)
（2）ref 与 $parent / $children 适用 父子组件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例
（3）$attrs / $listeners 适用于 隔代组件通信
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
（4）provide / inject 适用于 隔代组件通信
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
（5）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
（6）Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
vuex的详细使用方法： vuex管理状态仓库使用详解
Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你知道的回答出越多方法越加分，表明你对 Vue 掌握的越熟练。
举例props使用
a.vue 引用了一个detail组件
详解eventBus通信方法
第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。
两个初始化事件中心的方法：
第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。
假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。
接下来，我们需要在 B页面 中接收这则消息。
同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：
如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
如果想移除事件的监听，可以像下面这样操作：
$on事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。
可以使用EventBus.$off('aMsg')来移除应用内所有对此某个事件的监听。
或者直接调用EventBus.$off()来移除所有事件频道，不需要添加任何参数 。
总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意两点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。
② 我说这是全网最全vue组件通信方式
prop
event
style和class
natvie修饰符
$listeners
v-model
sync修饰符
$parent 和 $children
$slots 和 $scopedSlots
ref
最常见的组件通信方式，由父组件向子组件传递。prop可接收一个数组或对象
子组件向父组件发送通知，并传递参数
子组件
父组件
父组件可以向子组件传递style 和 class ，style 和 class将合并到子组件根元素上
父组件
子组件
最终渲染结果
父组件在使用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，但是不包括style和class
父组件
子组件
最终渲染结果
Tip：子组件可以通过定义 inheritAttrs：false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据
在注册事件时，父组件可以通过 navite 修饰符，将事件注册到子组件根元素上
父组件
子组件
子组件可以通过 $listeners 获取父组件传递过来的所有处理函数
父组件在使用子组件时，可以在子组件上绑定v-model，子组件通过定义model的prop和event还获取父组件定义的值
父组件
<compn v-model=" "datas" />
子组件
和 v-model类似，用于双向数据绑定，不同点在于 v-model只能针对一个数据进行绑定，而 sync 修饰符没有限制
子组件
父组件
在组件内部，可以通过$parent 和$children属性，分别获取当前组件的父组件和子组件实例
ref
在使用组件时，可以通过在组件上定义ref来获取组件实例
provide和inject 可以实现深层组件通信，顶层组件只需定义provide，底层组件通过inject接受数据
顶层组件
如果一个组将改变了地址栏，所有监听地址栏的组将都会做出相应的改变，
vuex 过于笨重，通常不建议在小型项目中使用，小型项目可以使用store 或 eventbus代替vuex，vuex本质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。
store模式其实就是一个普通的js模块，各组件可以导入该模块，将数据放到data里面，此时store就具有响应式了。
tip: store模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据
③ vue脚手架如何实现将数据传给下一个html
跟脚手架没有关系。你可以用bus或者vuex传递数据。
④ Vuex的使用及组件通信方式
Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。
Vue组件简单常用的通信方式有以下几种：
1、父子通信：父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。
2、兄弟通信：bus
3、跨级嵌套通信：bus；provide / inject等。
Vuex有以下几个部分构成：
1）state
state是存储的单一状态，是存储的基本数据。
2）Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
3）Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）
4）Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）
5）Mole
Mole是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。
const moleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
moles: {
a: moleA,
b: moleB
}
})
store.state.a // -> moleA 的状态
store.state.b // -> moleB 的状态
触发异步请求操作：
this.$store.dispatch('reqHomeData')
actions中：
async reqHomeData({ commit }) {
const result = await server.getHomeData();
commit(GET_HOME_DATA, { homeList: result })
},
mutations中：
[GET_HOME_DATA](state, { homeList }) {
state.homeList = homeList
},
⑤ vue事件总线EventBus
vue组件有父子组件通信:props
兄弟组件通信:
可以使用vuex，还可以使用事件总线eventBus
使用方法：
1.初始化：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
另外一种方式，可以直接在项目中的 main.js 初始化 EventBus :
// main.js
Vue.prototype.$EventBus = new Vue()
2.发送事件
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus. on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});
EventBus如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
4.移除监听
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在这个特定的总线中使用两个方法 emit。一个用于创建发出的事件，它就是 on：
var EventBus = new Vue();
this. emit('nameOfEvent', { ... pass some event data ...});
this. on('nameOfEvent',( bus.$emit("sendMsg", '我是web秀');，另一个Vue页面使用
this. on('updateMessage', function(value) {
console.log(value); // 我是web秀
})
同时也可以使用this. off('sendMsg')来移除事件监听。
⑥ 史上最全前端vue面试题！推荐收藏
1.为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
3.vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,moles详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用
8. keep-alive: 组件缓存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created -> mounted -> actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。
9.vue传值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟组件传值
$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：
使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录
11.组件跨级传值
$attrs a->b->c
$listeners 监听
12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
20.vue获取dom？
ref
21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
23.vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
25.如何让scss只在当前组件中起作用？
⑦ Vue组件通信中eventBus的使用
原文链接： https://segmentfault.com/a/1190000013636153?utm_source=tag-newest
在vue1.0中，组件之间的通信主要通过vm.dispatch沿着父链向上传播和用vm.dispatch沿着父链向上传播和用vm.broadcast向下广播来实现。然而在vue2.0中，已经废除了这种用法。
vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。
然而在一些小型的项目，或者说像我这样写到一半才发现vue2.0用不了.broadcast和.broadcast和dispatch的人来说，就需要一个比较便捷的解决方法。那么，eventBus的作用就体现出来了。
主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。
这里来看一个简单的例子：
比如，我们这里有三个组件，main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件，而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现，click组件中触发点击事件后，由show组件将点击的是哪个dom元素console出来。
首先，我们给click组件添加点击事件
想要在doClick()方法中，实现对show组件的通信，我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js
importVuefrom'vue';exportdefaultnewVue();
这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。
importBusfrom'common/js/bus.js';
接下来，我们在doClick方法中，来触发一个事件：
methods: { addCart(event){Bus.$emit('getTarget',event.target); } }
这里我们在click组件中每次点击，都会在bus中触发这个名为'getTarget'的事件，并将点击事件的event.target顺着事件传递出去。
接着，我们要在show组件中的created()钩子中调用bus监听这个事件，并接收参数：
created(){ Bus.$on('getTarget',target=>{console.log(target); }); }
这样，在每次click组件的点击事件中，就会把event.target传递到show中，并console出来。
所以eventBus的使用还是非常便捷的，但是如果是中大型项目，通信比较复杂，还是建议大家直接使用vuex。
来看一个实际例子：
我们创建了一个selection.vue的下拉框组件，在layout.vue组件中使用了selection.vue组件，我们要实现点击layout.vue组件页面的任意一处（除下拉框组件本身外），都可以将下拉框收起来。首先，新建了一个eventBus.js文件，在里面新建了一个vue的实例赋值给const eventBus，在selection.vue和layout.vue中分别import eventBus from '../../eventBus'和import eventBus from '../eventBus'，则eventBus对于selection.vue和layout.vue就是一个全局的vue实例对象，然后通过分别调用eventBus这个实例的事件触发emit和事件监听emit和事件监听on来实现通信和参数传递。图6，是为了在一个页面中，把selection.vue使用了至少两次，则我们点击任意一个selection.vue的同时，要把其它的selection.vue给收起来，如图7。
图1：
图2：
图3：
图4：
图5：
图6：
图7：
⑧ vuex的五个属性及使用方法
vuex的五个属性及使用方法具体如下：
VueX是一个专门为Vue.js应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)。
Vuex有五个核心概念：
state,getters,mutations,actions,moles。
1.state：vuex的基本数据，用来存储变量
2.geeter：从基本数据(state)派生的数据，相当于state的计算属性
3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
4.action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。
5.moles：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。