Vue.js不常见细节汇总

1. 父组件导入子组件的.vue文件后缀名最好写上

好处: 在使用vscode开发ctrl+左键的时候，可以快速定位到当前组件的定义文件，如果不加上.vue后缀是不会进行跳转的

2. 组件和标签中名称以及属性名称最好使用短横线，在SFC中使用驼峰也是可以的。

好处

1. 浏览器对于标签和属性是忽略大小写的， 在浏览器渲染的时候都会转化为小写的方式渲染
2. 良好的代码规范，好些第三方库都是使用短横线连接.
3. 但是为什么我们在写驼峰的时候Vue也能正确渲染？
   • 因为Vue模板在渲染过程中是通过Vue-loader进行处理通过@vue/compiler-sfc(v2中vue-templete-compiler)进行渲染的, 会将驼峰的属性变为短线链接的属性,渲染完成后在通过浏览器渲染出来, 但是在非SFC中只会统一转换为小写,不会使用短横线进行连接

3. 为什么在使用props对对象属性传递参数的时候校验默认值必须是函数。

原因：

1. 和data是一样的， vue在使用组件的时候,每个组件都编译为一个对象。 如果default返回是同一个对象，由于引用类型的关系, 会共享同一份内存，在被更改的时候所有默认值都毁被改掉. 所有默认是一个函数， 每个组件返回不同的引用地址.在组建中渲染不同的对象
2. 规范问题，控制条会报错。

4. 组件化开发

• 4.1 父子组件之间的数据传递: props和$emit

  • props 用于子组件接收父组件传递的props属性
  • $emit 用于子组件向父组件通过自定义事件方式传递数据
  • $emit中的自定义事件，我们可以通过emits声明检验要传递的参数

    //emits的两种形式 (数组) 
    emits: ["changeTab"] // 不进行参与参数校验，指定自定义事件，有利于代码可读性
    // 对象形式
    emits: {
      changeTab: null // 不进行参数校验的形式
      changeTab: payload => {
        if (payload === '是满足自定义事件参数') { 
          // 满足的情况
          return true
        } else {
         // 不满足的情况也会进行数据传递，只是在控制台会发生警告
          return false
        }
      }
    }
    
    

  • 不满足参数校验的情况
  • 

• 4.2 跨级父子孙组件之间的数据传递: provide和inject

  • provide用于向子孙组件中提供数据, 在provide直接提供data中的动态数据, 通过对象的方式会发生报错，实质上其实是this指向的问题(错误使用)
  • 
  • 我们可以通过函数作用域的关系,通过修改provide为一个函数，因为函数中的this指向当前实例可以获取到data中的属性
    • 
  • 但是由于provide提供的数据没有双向绑定的机制，所有我们可以通过一下两种方式
    1. 通过Vue2中函数返回值返回一个响应式的数据实现
    • 
    2. 通过Vue3中提供的computed计算函数返回一个响应式的值
    • 
  • 4. inject 通过inject获取父组件提供的值，在模板中使用

• 4.3 事件总线数据传递: mitt

  在Vue3中移除了$on$off和$once实例属性, 我们可以通过官方提供的mitt事件总线库实现同样的效果

    import mitter from 'mitt'
    const emitter = mitt()
    //导出mitter多实例对象
    export emitter1 = mitter()
    export emitter2 = mitter()
    export emitter3 = mitter()
    export default emitter
  

  • mitt导出emitter事件对象
    • 
  • 通过mitt进行事件注册
    • 
  • 通过mitt子组件对应事件发布
    • 

• 4.4 非props的Attribute属性继承情况

  一般用于内聚性高级组件或者模板的开发，结合$attrs和$listeners使用，通过v-bind进行非props的Attribute属性绑定，最常见的利用input组件开发组件通过v-bind="$attrs"传递的属性

  • 根组件是否继承的问题

    • 

    • 根组件属性继承编译结果。 -

      -

  子组件在父组件中使用， 绑定在子组件上的非props属性会被作用在子组件的根节点上，但是Vue3中使用Fragment 可以有多个根组件，这种情况下是不会进行继承的。因为非props属性不知道继承到那个节点上

  • 禁止根组件继承(在子组件中使用: inheritAttrs: false)

    一般用来子组件子元素使用属性

    1. 手动绑定节点单个属性
       • 
    2. 手动绑定节点多个属性

       •