MyVue

silence^

已于 2023-02-15 21:59:38 修改

阅读量460

点赞数 1

文章标签： vue.js javascript html5

于 2021-09-08 17:04:14 首次发布

本文链接：https://blog.csdn.net/lyclyc_/article/details/120183699

版权

每个页面都是一个Vue实例

Var和let const区别
1.var声明的变量会挂载在window上，而let和const声明的变量不会
2.var声明变量存在变量提升，let和const不存在变量提升
3.let和const声明形成块作用域(还有全局作用域和局部作用域，var只有全局作用域和局部作用域)
4.同一作用域下let和const不能声明同名变量，而var可以
5.const一旦声明必须赋值,不能使用null占位；声明后不能再修改；如果声明的是复合类型数据，可以修改其属性

Es6中set和map的区别：
Set 类似于数组，但是成员的值都是唯一的，没有重复值。Set函数可以接受一个数组或者类似数组的对象作为参数，用来初始化。
Map类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值，包括对象也可以当做键。

https://blog.csdn.net/qq_35191845/article/details/122212228
Keep-alive是vue的内置组件，能在组件切换过程中把状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，keep-alive与<transition>(transition是vue中的过渡动画)相似，只是一个抽象组件，它不会在DOM树中渲染，也不会在父组件链中存在。
一般结合路由和动态组件一起使用，用于缓存组件。
黑名单(exclude)–不允许某个组件被缓存，/白名单(include)允许某个组件被缓存，两者都支持字符串或正则表达式，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

vue的动态组件(component)
vue的动态组件切换是使用了内置组件component和 is属性进行绑定的；可以说is绑定的就是组件对应的名字

计算属性computed和监听属性watch的区别：https://www.cnblogs.com/jiajialove/p/11327945.html
computed
1,支持缓存，只有依赖数据发生改变，才会重新进行计算
2,不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3,computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4, 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5,如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
watch
1,不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　immediate：组件加载立即触发回调函数执行，
　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。监听的对象也可以写成字符串的形式
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别

es6中：--------------可以看es7
Object新方法：

       1.Object.is() 为解决一些异常的比较问题js中新增了Object的is方法

                  Object.is(NaN, NaN); //true

                  Object.is(5, "5"); //false

       2.Object.assign() 解决了两个对象间浅拷贝的问题：（深拷贝）

                  Object.assign(a, b)

       将对象b的属性拷贝到a对象上，合并成一个新的对象，合并的对象会体现在a上，同时在assign方法中也会return这个新对象
       3.Object.getOwnPropertyNames(obj) 获取obj的key名称并储存为一个数组，返回值为此数组

       4.Object.keys(obj) 获取obj的key名称并储存为一个数组，返回此数组

       5.Object.values(obj) 获取obj的value名称并储存为一个数组，返回此数组

 6.Object.entries(obj) 获取obj的键值储存为一个二维数组，返回此二维数组

重复的对象字面量属性：

       ES5的严格模式下，如果对象出现key相同的情况，那么就会抛出错误。而在ES6的严格模式下，不会报错，后面的key会覆盖掉前面相同的key

vue生命周期，每个钩子函数发生了什么？
①实例创建之前/之后：
beforeCreate(实例创建之前)：,此时不能用watch监听, data和methods中的数据都还未初始化，也不能用computed。

created(实例创建之后)：可以用watch监听，data和methods已经初始化完成, vue开始编译模板，在内存中生成一个编译好的模板字符串，然后把模板字符串渲染为内存中的dom。但是页面还是空白的。这里没有 $el，如果非要想与 DOM 进行交互，可以通过vm.$nextTick 来访问 DOM。

②组件挂载之前/之后：
beforeMount(组件挂载之前)：模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串, 相关的 render 函数首次被调用

mounted(组件挂载之后)：页面的内容已经渲染出了，数据完成双向绑定，也可以访问到dom, el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

运行中的两个事件

③数据改变视图更新之前/之后：
beforeUpdate(数据改变视图更新之前):数据改变视图更新之前,data中的数据已经被更新了，但是页面中的data还未被替换过来

updated(数据改变视图更新之后):页面和data中的数据已经同步

④实例销毁之前/之后:
beforeDestroy(实例销毁之前):在这个阶段,对data的改变不会再触发周期函数,此时Vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。是最后一次可以使用data和methods的钩子函数。

destroyed(实例销毁之后):实例已经被完全销毁，所有的事件监听器会被移除，所有的子实例也会被销毁
destroyed (销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

扩展：异步请求在哪一步发起？
可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。
如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
能更快获取到服务端数据，减少页面loading时间；
ssr 不支持 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性。

es6新增
1，let const
2,解构赋值----数组解构和对象解构
3，函数和参数
箭头函数，–this指向父级作用域，
参数：参数默认值，和rest剩余参数，就是… 把后面的参数都放到数组中，比如…values

// 参数很多，不确定多少个，可以使用剩余参数
function fn(...values) {
    console.log(values); // [6, 1, 100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10)); //undefined

function fn(a, b, ...values) {
    console.log(a); // 6
    console.log(b); // 1
    console.log(values); // [100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10)); //undefined

4,内置函数的扩展
1，扩展运算符 … 可以把数组中的每一项都展开

// 合并两个数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
// 把数组展开作为参数，可以替代 apply
// 求数组的最大值
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);

2，Array.from–把伪数组转换成数组
伪数组必须有length属性，如果没有将返回一个空数组
转换后的数组长度，是根据伪数组的length决定的

let fakeArr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
// 转数组的对象必须有length值，因为得到的数组的成员个数是length指定的个数
// 上例中，如果length为2，则得到的数组为 ['a', 'b']

3，find方法和findIndex方法
find()用于查找数组中的值，findIndex(）查找数组的下标
find 找到数组中第一个满足条件的成员并返回该成员，如果找不到返回undefined。
findIndex 找到数组中第一个满足条件的成员并返回该成员的索引，如果找不到返回 -1 。
4，includes方法，判断数组是否包含某个值，返回true/false
5,startswith()和endwidth()
startswith()返回布尔值（true/false），表示参数字符串是否在原字符串的头部或指定位置.
endwidth()返回布尔值，表示参数字符串是否在原字符串的尾部或指定位置
6，repeat()方法，返回一个新字符串，表示将原字符串重复n次。

5，新增对象Set–它类似于数组，但是成员的值都是唯一的，没有重复的值

js中this指向问题： https://www.cnblogs.com/fitzlovecode/p/jsadvanced4.html
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
1，普通函数调用，指向全局对象window

// 当作为函数,直接调用时
// this ===> 在非严格模式下,全局对象window;  严格模式下是undefiend
Person('red')   // this => window

当作为构造函数时,this => 构造出的实例对象

// 当作为构造函数时
// this ===> 构造出的实例对象
var fitz = new Person('pink')   // this => fitz

当作为对象的方法调用时,this => 调用方法的那个对象#

// 当作为对象的方法调用时
// this ===> 调用方法的那个对象
fitz.getColor()     // this => fitz

箭头函数的this, this => 就是外层函数的this
准确的来说, 箭头函数自己没有this, 在箭头函数中的this会像作用域链一样像外层逐层查找, 箭头函数的this就是它外层函数的this-----注意: 箭头函数的this一旦确定无法更改,但是可以通过改变外层函数的this然后曲线更改箭头函数的this

call和apply会改变传入函数的this指向
使用call、apply、bind方法时,this => 法中指定的对象(传入的第一个参数)


```c
// 当使用call、apply、bind方法时
// this ==> 方法中指定的对象(传入的第一个参数)
var lx = {}
fitz.setColor.call(lx, 'blue')  // this => lx
console.log(lx)     // lx {color: "blue"}

/apply和call调用/
let obj1={
name:‘程新松’
};
let obj2={
name:‘saucxs’,
fn:function(){
console.log(this.name);
}
}
obj2.fn.call(obj1);

**call 和 apply 两个主要用途：**

1.改变 this 的指向（把 this 从 obj2 指向到 obj1 ）

2.方法借用（ obj1 没有 fn ，只是借用 obj2 方法）

call与apply区别

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。

call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。

apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）
即为call把函数所需要的参数列举出来，
apply则是需要包装进一个数组中传递
bind也能改变this的指向
bind()方法会返回一个新的函数，其方法的参数就是所要绑定this的对象
call/apply和bind区别：
call/apply：改变了函数的this上下文后马上执行该函数，返回函数的执行结果
bind：返回改变了上下文后的函数,不执行该函数，返回函数的拷贝，并指定了函数的this指向，保存了函数的参数。

没有进行登录，在地址栏中输入地址想要进入怎么办？？------未整理

vscode优势：

轻量级编辑器
VScode是一款轻量级的编辑器，安装包非常小，而且启动速度非常快。虽然这对实际的项目没什么大的帮助，但是可以在无形间提高我们的用户体验。
1. 丰富的插件系统
  . 3. 代码跟踪功能

我们是一个团队，项目中往往都是协作开发，绝大多数情况下要使用Git来管理我们的代码，这个时候VScode会跟踪我们的代码，非常明显地为我们标注：你更改了那些文件，文件中你修改可第几行的代码，让我们对自己编写的代码一目了然。

html5新增
1,语义化标签：header footer nav aside section
2,在表单方面，为input增加了color,email,data,range等类型
3，在存储方面，提供了sessionStorage,localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取，
4,在多媒体方面规定规定了音频和视频audio和vedio，
5，canvas画布，拖放，多线程编程的web worker和websocket协议

localstorage和sessionstorage和cookie的区别和联系：
1，都是用来存储客户端临时信息的对象
2，都是只能存储字符串类型的对象
3,localStorage生命周期是永久,只要用户不在浏览器清除localstorage信息，这些信息就会一直存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，数据也会消失。
cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

4，不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
https://www.cnblogs.com/wwwxxjsyy/p/13825119.html
~

关于cookie:
cookie:客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效。cookie每次都会跟着http请求一起发送，非常的浪费宽带

关于MVVM --https://www.jb51.net/article/155723.htm
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
ViewModel 是一个同步View 和 Model的对象。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，ViewModel里面包含DOM Listeners和Data Bindings，DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
好处：

低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
可测试性。可以针对ViewModel来对界面(View)进行测试

网络协议的六层架构：
1，数据链路层
2，网络层
3，传输层，
4，会话层，
5，表示层
6，应用层

js声明数组的三种方式：
var cars=new Array();

cars[0]=“a”,

cars[1]=“b” ,

cars[2]=“c”;

var cars=new Array(“a”,“b”,“c”);

var cars=[“a”,“b”,“c”]

js中的闭包：
js作用域中访问变量的权利是由内到外的，内部作用域可以获得当前作用域下的变量，并且可以获得包含当前作用域的外层作用域下的变量。反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的。
如果想在一个函数内部可以访问另一个函数内部的变量，可以用闭包。闭包的本质就是在一个函数内部创建另一个函数。
闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收
https://blog.csdn.net/dovlie/article/details/76339244

全局变量的危害：
长期会占用内存
容易引发命名冲突。在多人协作的开发中，全局变量过多就会导致命名冲突的发生的可能性增大，会污染命名空间
会影响到局部变量的获取。
var a=10;
function test(){
console.log(a);
var a=20;
}
test();
1
2
3
4
5
6
上述代码输出为undefined，因为函数内部的console.log（a）是局部变量a，这里存在变量声明的提升，但是变量的赋值没有提前。即上述函数中的代码等价于：
var a;
console.log(a); //输出为undefined
a=10;

vue中解决跨域问题？
（接口是在一台服务器或者一个端口上，前端的页面服务在另一个服务器或者另一个端口上，这样从前端获取接口里的数据就会出现跨域问题，报错为----CORS disabled Access-Control-Allow-Origin）
跨域问题的出现是因为浏览器的同源策略问题，只要协议、域名、端口号有一个不一样就会出现跨域。
解决跨域：
1，jsonp
网页通过script标签向服务器请求json数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function getData(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

2,　2.使用Jquery ajax实现

$.ajax({
  url: 'http://www.test.com:8888/getData',
  type: 'get',
  dataType: 'jsonp',  // 请求方式为jsonp
  jsonpCallback: "handleCallback",    // 自定义回调函数名
  data: {}
})
　3.在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

devServer: {
proxy: { //配置跨域
‘/api’: {
target: ‘http://121.121.67.254:8185/’, //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
‘^/api’: ‘’
}
},
}
},

vue加载时文件的执行顺序：
1、执行index.html文件-----所有组件（后缀名为.vue都被视为组件）都会通过此文件进行渲染加载。

2、执行main.js文件------相当于一个C/Java中的入口函数。控制着初次启动Vue项目要加载的组件

3、main.js挂载了app.vue文件，用app.vue的templete替换index.html中的

4、main.js中注入了路由文件，将对应的组件渲染到router-view中

5、router-view中加载Layout文件

6、Layout 加载Navbar, Sidebar, AppMain

用Node.js写过路由信息吗

前端模块化开发的认识：
（1）异步模块定义（AMD）规范是 require. js推广的、对模块定义的规范。
（2）通用模块定义（CMD）规范是 SeaJS推广的、对模块定义的规范。
（3）AMD提前执行，CMD延迟执行
（4）AMD推荐的风格是通过 module transport规范暴露接口，即通过返回一个对象暴露模块接口；CommonJs的风格是通过对 module.exports或exports的属性赋值来达到暴露模块接口的目的。

https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/114826053

前端性能优化—https://www.jianshu.com/p/d9c20eafa67e
一、网络加载类
1，减少HTTP资源请求次数-----尽可能合并静态资源图片，css,js,减少页面请求次数和资源请求消耗，
2，减少http请求大小----如减少没必要的图片、JavaScript、CSS 及 HTML 代码
3，将CSS或JavaScript放到外部文件中，避免使用style或script标签直接引入----
4，避免空的href和src
5,减少页面重定向— 页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要200毫秒不等的时间开销
二，缓存类
1，合理利用浏览器缓存—比如用localStorage保存ajax返回的数据，或者使用localStorage保存CSS或JavaScript静态资源内容，尽可能减少网络请求，保证静态资源内容的快速加载；
三，图片类
1，使用高压缩比的图片，使用较小的图片
2，图片懒加载
3，使用iconfont代替图片图标
4，强缓存策略–对于一些永远不会变的图片可以使用强缓存的方式缓存在用户的浏览器
四，脚本类：
1，使用id-- 选择器选择页面DOM元素时尽量使用id选择器，因为id选择器速度最快；
2,理缓存DOM对象—需要重复使用的DOM对象，要优先设置缓存变量，避免每次使用时都要从整个DOM树中重新查找；

``
vue项目开发过程中遇到的兼容性问题：
一、IE家族不支持Promise对象
解决方案：
安装： cnpm install es6-promise
在 main.js 引入： polyfill require(“es6-promise”).polyfill();

二、IE不支持箭头函数，
解决方案：
①可以安装插件，
②不使用箭头函数，直接用function函数，只需var that = this来指代this

三，vue2不支持ie8以及8以下的版本
不支持ie8原因
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue响应式中的，Object.defineProperty在IE8下只能对DOM对象使用, 如果对原生对象使用Object.defineProtry()会报错。

解决方案：使用babel-polyfill
1，下载依赖

npm install --save babel-polyfill

2，在main.js中引入

import 'babel-polyfill';

3，在webpack.base.conf.js文件中将

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.js',
      }

替换为

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: ["babel-polyfill", "./src/main.js"],
  }

IE11不支持router-link是因为：
IE11上router-link无法跳转，主要是因为当url的hash change的时候，浏览器没有做出相应。这时候需要做一个兼容，当浏览器是IE11时手动给url加一个hashChange事件

new Vue({
  el: '#app',
  router,
  store,
  template: '<Layout/>',
  components: { Layout },
  render: function (createElement) {
    if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {
      window.addEventListener('hashchange', () => {
        var currentPath = window.location.hash.slice(1)
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath)
        }
      }, false)
    }
    return createElement(Layout);
  }
})

vue中组件传值：–https://m.php.cn/vuejs/476497.html
将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件
1,父子组件传值
【v-bind是一个单向数据绑定，映射关系：Model->View，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。
父组件的数据需要通过 prop 才能下发到子组件中。props是子组件访问父组件数据的唯一接口
一个组件可以直接在模板里面渲染data里面的数据（双大括号）。
子组件不能直接在模板里面渲染父元素的数据----也就是说要通过props。
】
v-bind:缩写为：动态地绑定一个或多个特性，或一个组件 prop 到表达式

在子组件绑定父组件的数据，子组件通过props接受参数。
父组件中： <users v-bind:users="users"></users>
//App.vue父组件

import Users from "./components/Users"

data(){

    return{

      users:["Henry","Bucky","Emily"]

    }

  },

components:{

    "users":Users

  }

//users子组件

<ul>

      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面

    </ul>

 props:{

    users:{           //这个就是父组件中子标签自定义名字

      type:Array,

      required:true

    }

子组件向父组件传值
子组件绑定事件： <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件

data() {

    return {

      title:"Vue.js Demo"

    }

  },

  methods:{

    changeTitle() {

      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”

    }

父组件中：

 <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致

import Header from "./components/Header"

export default {

  name: 'App',

  data(){

    return{

      title:"传递的是一个值"

    }

  },

  methods:{

    updateTitle(e){   //声明这个函数

      this.title = e;

    }

  },

  components:{

   "app-header":Header,

  }

vue中ref也可以父子组件传值还有vuex啊–自己搜
兄弟组件传值方式—
第一种方式
https://baijiahao.baidu.com/s?id=1666564542300874209&wfr=spider&for=pc
1，在项目中创建一个单独的eventbus.js文件，该js文件作用是暴露一个vue实例，
2,新建两个子组件，在父组件中注册并使用这两个子组件。然后分别在这两个子组件中引入eventBus.js
3，one组件向two组件传值：(传值使用￥emit)，传值比如写个@click事件，在methods里面点击触发，
4，two组件接收到one组件的值：(接收值使用￥on)
第二种方式：
，兄弟1传给父组件，父组件传给兄弟2.兄弟2再传给兄弟1
第三种方式：
vuex

silence^

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
MyVue

Var和let const区别1.var声明的变量会挂载在window上，而let和const声明的变量不会2.var声明变量存在变量提升，let和const不存在变量提升3.let和const声明形成块作用域4.同一作用域下let和const不能声明同名变量，而var可以5.const一旦声明必须赋值,不能使用null占位；声明后不能再修改；如果声明的是复合类型数据，可以修改其属性Es6中set和map的区别：Set 类似于数组，但是成员的值都是唯一的，没有重复值。Set函数可以接受一个
复制链接

扫一扫

MyVue

“相关推荐”对你有帮助么？