2.1组件传值(通信)的方式

1，父组件引入子组件，绑定数据

这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦(父-》子=》孙)
这种方式:子不能直接修改父组件的数据

2.子组件直接使用父组件的数据

子组件通过:this.$parent.xxx使用父组件的数据
这种方式:子可以直接修改父组件的数据

3.依赖注入

provide/inject ===> 依赖注入
优势:父组件可以直接向某个后代组件传值(不让一级一级的传递)

4.子组件传值给父组件

子组件定义自定义事件 this.semit

5.子组件传值给父组件

父组件直接拿到子组件的数据

6.$refs 传值

this.$refs[“EditBase”].install({
type: 1,
datasource: 2,
}),
<List refe’child’></List> this.$refs.child

6.平辈之间的传值( 兄弟可以拿到数据)

新建一个数据js文件bus.js import Vue from ‘vue’ export default new Vue()
<button @click=‘btn’>按钮</button> bus.$emit(‘change’,this.str3);
bus.$on(‘change’,val=>{console.log( val )})

vue3和vue2有哪些区别?

1.双向数据绑定的原理不同

Vue2 : object.defineProperty() this.$set( this.obj , 'c",3) data里面没有的数据不会被劫持到。后期添加的属性是劫持不到
Vue3 :new Proxy() 即使后添加的也可以劫持到 $set在vue3中没有，因为new Proxy不需要
vue2 Object.defineProperty() 来监听属性的变化 主要涉及三个核心：Observe、Compile、Watcher。
并对data数据进行数据劫持（响应式处理），这个过程发生在Observe中。
对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
定义一个dep()函数和Watcher，将来对应数据变化时Watcher会调用更新函数。
Vue3 的响应式系统依赖了 ES6 的 Proxy 来代理对象的访问。当你读取或修改代理对象的属性时，它可以捕获这些操作并以此来触发更新。
Vue3 的双向数据绑定是通过 ref 和 reactive 来实现的，并且结合了响应式系统的特性。
ref：用于创建简单的响应式引用对象，可以是响应式的基本类型数据。
reactive：用于创建响应式的对象，可以是多层嵌套的对象，并且会遍历对象的属性，将所有属性都转换成响应式的。

2. 是否支持碎片

vue2 不支持 vue2只能有一个根节点
vue3 支持 vue3支持多个根节点

3.API不同

vue2 选项式API
vue 组合式API
选项式API data methods 组成的混合的API 能获取到this
组合式API 合成的API 比vue2简洁 不能获取到this

4.定义数据变量方法不同

vue2 数据放在data里面，方法是放在methods
vue3 数据方法 放在setUp 在组件触发的时候就会触发，在beforCreate的前面。通过 ref 和 reactive 来实现的

5.生命周期的不同

6.传值不同

7.指令和插槽不同

8.main.js不同

9.v-if和v-£or优先级不同了

vue2 我们可以把原型挂在vue,

slot插槽

匿名插槽 :插槽没有名字 具名插槽 :插槽有名字 组件封装的时候会用到插槽
作用域插槽: 传值
<template #footer=’{arr}’>
<div v-for=’(item,index)in arr’ :key=‘index’>{{ item }}</div>
<div style=‘color:red’>温馨提示</div>
</template>