vuevuevue

Vue的数据双向绑定是通过Vue的响应式系统实现的

具体原理：

1. Vue会在初始化时对数据对象进行遍历，使用Object.defineProperty方法将每个属性转化为getter、setter。这样在访问或修改数据时，Vue能够监听到数据的变化。

2. 当数据发生变化时，Vue会通知所有依赖该数据的地方进行更新。这是通过收集依赖和触发更新的过程实现的。

3. 在模板中，通过使用Vue提供的指令（如v-model）或插值表达式（{{}}）将数据绑定到DOM元素上。

4. 当用户输入或操作DOM元素时，触发相应的事件（如input事件），Vue会根据事件类型和绑定的指令，更新数据对象中的对应属性的值。

5. 数据对象的值发生变化后，Vue会自动更新绑定了该数据的DOM元素，实现视图的更新。

总的来说，Vue的数据双向绑定是通过使用Object.defineProperty方法将数据对象转化为响应式的getter、setter，并通过收集依赖和触发更新的机制，实现数据的变化能够自动更新到视图中，同时用户的操作也能够更新数据对象的值。这样就实现了数据和视图之间的双向绑定。

通信方式：

全局事件总线、vuex：适用于所有组件通信

1.安装全局事件总线：在main.js文件中在beforeCreate里面将this（此时的this指向vm）赋值给绑定在vue的原型对象上的$bus

2.数据发送者：用this.$bus.$emit（this.name）来发送要共享的数据

3.数据接收者：用this.$bus.$on（

（data）=>｛console.log（data）｝）接受数据

自定义事件：适用于父子组件通信

在父组件写一个函数，将这个函数绑定在子组件（子组件的实例对象上）上并赋值给子组件的v-on的方法名上，然后在对应子组件用this.$eimt（v-on上的方法名 ，参数二可以是子组件要传给父组件的数据，例如this.name，然后父组件接受参数）触发这个事件

props：适用于父子组件通信

1.父组件里定义一个方法，然后动态绑定一个方法给子组件，

2.在子组件里面用props：[“方法名”]，然后就可以子组件调用这个父组件传过来的方法（父传子）

3.在子组件的函数里面调用这个方法，可以传入参数,然后父组件在最初定义的方法里面接受这个参数（子传父）

ref：适用于父子组件通信

1.在父组件引入的子组件里面用ref进行命名，在mounted里面用this.$refs.student（ref名字）.$on（“stguigu”（子组件要触发函数名），this.getStudentName（接收子组件传过来的参数的函数））

2.子组件里面用this.$emit（“atigui”（绑定在子组件的函数名）this.name（要传到父组件里面的参数））接收父组件传过来的方法名atiguigu

3.父组件用getStudentName接收子组件传过来的参数