Vue2学习第一天

1.解决全局和局部样式冲突

在style里面加scoped作用于局部样式。

2.在组件中data数据不能是对象，而是函数

1.组件通信

1.（父子之间）组件通信

父亲给儿子组件标签动态（加冒号）赋值属性，父传子

儿子通过props接收

儿子修改传回父亲，子传父

props校验（单项数据流，子组件不能直接修改父组件传来数据，谁的数据谁负责，用$emit）

2.（简易非父子）组件通信-event bus(事件总线)可以一对多

1.在utils下写一个实例.js，注意发布和接收都要引入

2.接收方在created监听

3.发布方用$emit发布

3.（非父子）组件通信-provide&inject(跨层级共享 例：爷孙)

在Vue.js框架中，provide和inject是一个功能对，用于实现在组件树中跨组件层级的数据传递。这种方式不依赖于父子组件的关系，也就是说，祖先组件可以向所有后代组件提供数据，而后代组件可以选择性地注入这些数据。

provide

provide函数允许一个组件向其所有子孙组件注入一个依赖，而不论组件层次有多深，并无论子孙组件的类型是什么（函数式组件、普通组件都可以）。

使用方法：

1. 在父组件或祖先组件中使用provide函数来提供数据。
2. 通常在组件的created或beforeCreate生命周期钩子中设置provide。

Vue.component('parent-component', { provide: { foo: 'This is foo value', }, // ... });

inject

inject函数允许一个组件从其祖先组件中注入数据，祖先组件需要使用provide来提供这些数据。

使用方法：

1. 在需要接收数据的子孙组件中使用inject来接收数据。
2. 可以在组件的created或beforeCreate生命周期钩子中设置inject。

Vue.component('child-component', { inject: ['foo'], // ... });

示例

假设我们有一个应用，其中有一个全局的用户状态，我们希望在多个层级的组件之间共享这个状态，而不是通过层层传递props来实现。

父组件：

Vue.component('grandparent-component', { data() { return { globalData: 'Some global data' }; }, provide() { return { globalData: this.globalData }; } });

任意子孙组件：

Vue.component('any-child-component', { inject: ['globalData'], created() { console.log(this.globalData); // 输出: 'Some global data' } });

注意事项

• provide和inject绑定并不是可响应的。这意味着当provide的值发生变化时，使用inject的组件并不会重新渲染。如果需要响应式，可以借助Vuex或其它状态管理库来实现。
• 组件间的provide和inject关系是惰性的，只有当组件确实需要注入数据时，才会触发provide的函数调用。
• provide和inject不限制在父子组件关系，只要组件在提供者的后代链中，就可以使用inject来接收数据。

通过使用provide和inject，Vue.js允许开发者在组件之间创建灵活的数据传递机制，这在某些情况下比传统的props和events更加方便。

主组件中数据用provide，接收方用inject接收

注意：简单类型数据不可响应，复杂类型可以响应！推荐写成复杂类型，对象写法。

2.v-model原理（重要）

双向绑定

1.表单类组件封装

父组件只需要干两件事（提供数据+绑定）

子组件通过props接收 注意值用value，$emit用input

select组件中分开写

2.ref和$refs获取DOM和组件实例

3.VUE异步更新，$nextTick