【Vue】自定义事件、动态插槽、异步组件

1. 自定义事件

1.1 事件名

• 不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

//js
this.$emit('myEvent')

//html

必须始终使用 kebab-case 的事件名

1.2 .sync修饰符

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符

//与上面的代码等价

---

2. 插槽

• A. 假设有一个组件 ，如果 的 template 里没有包含一个 元素，则任何传入 的内容都会被抛弃。
  例如

//没有效果

    你好
  

• 使用具名插槽

  当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

  为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

  ---

  4. 异步组件

  异步组件是指，在需要用到它的时候才从服务器加载一个组件

  • 如果项目支持 webpack 2+ 和 ES 2015+，那么可以这样实现异步组件

     Vue.component(
          'async-webpack-example',
          () => import('./my-async-component')
      )
    

  • 如果项目支持 webpack 2+ 和 ES 2015+，那么可以这样实现异步组件

    new Vue({
          // ...
          components: {
               'my-component': () => import('./my-async-component')
          }
      })
    

  ---

  5. 处理边界情况

  5.1 依赖注入

  访问更深层的嵌套组件属性时，$parent属性无法满足，依赖注入提供了两个实例选项provide 和 inject。

  //html
  
      
        
          
  
          
        
      
  
    
  

  //js
  Vue.component('component-one', {
    template: `
      
  
    `,
    provide:{
      provide1(){
        console.log('这是component-one提供的函数')
      }
    }
  })
  Vue.component('component-two', {
    template: `
      
  
    `,
  
  })
  Vue.component('component-three', {
    template: `
      Click me
    `,
    inject: ['provide1']
  })
  
  var app = new Vue({
    el: '#app',
  
  })
  

  5.2 事件侦听器

  • 可以通过 $on(eventName, eventHandler) 侦听一个事件
  • 可以通过 $once(eventName, eventHandler) 一次性侦听一个事件
  • 可以通过 $off(eventName, eventHandler) 停止侦听一个事件