vue3.0 学习笔记 —— 深入了解组件

vue的$emit和原生的事件有什么不同的地方？
vue的事件不会冒泡上去，所以父组件只能接收直接子组件提交的事件，不能接收孙子组件提交的事件

如果vue中通过$emit提交了一个click事件，此时vue会如何处理原生的click事件会和vue中提交的click事件？ 只会处理vue提交的click事件，不会响应原生的click事件

这段代码什么意思：<MyComponent v-model:title="bookTitle" />

• bookTitle是可以在当前组件中使用的一个变量
• 子组件中接收一个title的prop
• 子组件会提交一个update:title的事件

还是上面这段代码，默认的使用v-model就可以了，在什么情况下必须要使用v-model:title这种写法？

• 子组件接收的props名称不是modelValue时必须要给v-model显式声明传入参数的props的名称

一个组件是否可以有多个v-model绑定？

• 可以，每个v-mode显式的声明冒号后面的props名称就可以

v-mode有哪些修饰符？

• trim，number，lazy

如何自定义v-model的修饰符？

• 在子组件中直接使用 this.modelModifiers.
• 在父组件中使用v-mode.

子组件是<button class="btn large" @click="myClick">click me</button>，父组件这样调用子组件<MyButton @click="onClick" />，这两个click事件的回调函数哪个会最终执行？

• 子组件的myClick函数和父组件的onClick函数都会被调用

$attrs的作用是什么？

• $attrs中保存了所有的除了props和emits定义之外的所有的属性
• 当子组件有多个根元素的时候，需要明确的使用v-bind把$attrs绑定到某一个根元素上

slot和调用组件时的template如何对应起来？

• 在父组件中使用时把特定的模版内容实用template包裹起来，并使用v-slot:的方式进行标记
• 在子组件中的slot上添加name属性并吧对应的name添加上去即可
• 注意：v-slot:可以简写为 #

父组件中是否可以接收子组件通过slot传递过来的参数？

• 可以，在父组件的中使用子组件时，添加v-slot="slotProps"即可
  
• 一个例子
  

inject和provide主要是解决什么问题的？

• 主要是解决属性传递链的问题，比如说一个组件给他的孙子组件传递一些数据，但是这些数据在这个组件的子组件中没有用到，那么这种情况下我们可以考虑使用provide和inject来进行数据传递，当前组件不必向子组件传递任何的数据。
• 和全局的vuex不同的是vuex是全局性的，存储的数据所有的组件都可以访问到，而inject和provide的数据只在当前组件的子组件和子孙组件中可以访问到
• 使用的时候需要在当前组件进行provide，然后在后代组件中使用inject
• 当然也可以在应用的根组件上进行provide，这样数据也就可以全局范围内访问到

Async Component的使用场景有哪些？

• 项目分包