这七个Vue模式，可能你经常用！但现在看对你很有帮助！

说实话，阅读文档并不是我们大多数人喜欢的事情，但是当使用像Vue这样不断发展的现代前端框架时，每一个新版本都会有所变化，我们很有可爱已经错过了一些后来推出的新且好用的功能。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了烟台免费建站欢迎大家使用！

今天，刷碗智带大家来看看那些有趣但不那么流行的功能。记住，所有这些都是官方Vue文档的一部分。

1. 处理加载状态

在大型项目中，我们可能需要将组件分成小块，只有在需要时才从服务器上加载。为了更容易做到这一点，Vue允许我们将组件定义为一个工厂函数，异步地解析组件定义。Vue只会在组件需要渲染的时候触发工厂函数，并把结果缓存起来以备后面的重新渲染。2.3版的新内容是，异步组件工厂还可以返回以下格式的对象。

 
 
 
 
    
  
  
  
  
  1. const AsyncComponent = () => ({
    2. 
  
  
  
  
  2.   // 需要加载的组件 (应该是一个 `Promise` 对象)
    3. 
  
  
  
  
  3.   component: import('./MyComponent.vue'),
    4. 
  
  
  
  
  4.   // 异步组件加载时使用的组件
    5. 
  
  
  
  
  5.   loading: LoadingComponent,
    6. 
  
  
  
  
  6.   // 加载失败时使用的组件
    7. 
  
  
  
  
  7.   error: ErrorComponent,
    8. 
  
  
  
  
  8.   // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    9. 
  
  
  
  
  9.   delay: 200,
    10. 
  
  
  
  
  10.   // 如果提供了超时时间且组件加载也超时了，
    11. 
  
  
  
  
  11.   // 则使用加载失败时使用的组件。默认值是：`Infinity`
    12. 
  
  
  
  
  12.   timeout: 3000
    13. 
  
  
  
  
  13. })
    14.

使用这种方法，我们有额外的选项，包括加载和错误状态、组件获取的延迟和超时。

2.通过 v-once 创建低开销的静态组件

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，我们可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：

 
 
 
 
    
  
  
  
  
  1. Vue.component('terms-of-service', {
    2. 
  
  
  
  
  2.   template: `
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.       
    Terms of Service
    5. 
  
  
  
  
  5.       ... a lot of static content ...
    6. 
  
  
  
  
  6.     
  •   `
  • })

    • 更多详细内容看官网：https://cn.vuejs.org/v2/guide/components-edge-cases.html

    3.递归组件

    组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

     
 
 
 
      
  
  
  
  
    1. name: 'unique-name-of-my-component'
      2.

    当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。

     
 
 
 
      
  
  
  
  
    1. Vue.component('unique-name-of-my-component', {
      2. 
  
  
  
  
    2.   // ...
      3. 
  
  
  
  
    3. })
      4.

    稍有不慎，递归组件就可能导致无限循环：

     
 
 
 
      
  
  
  
  
    1. name: 'stack-overflow',
      2. 
  
  
  
  
    2. template: '
      '
      3.

    类似上述的组件将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。

    4.内联模板

    当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      These are compiled as the component's own template.
      4. 
  
  
  
  
    4.     
      Not parent's transclusion content.
      5. 
  
  
  
  
    5.   

  • 内联模板需要定义在 Vue 所属的 DOM 元素内。

    不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 元素来定义模板。

    5. 动态指令参数

    指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。

    例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      Scroll down inside this section ↓
      3. 
  
  
  
  
    3.   I am pinned onto the page at 200px to the left.
      4.
  • Vue.directive('pin', {
  •   bind: function (el, binding, vnode) {
  •     el.style.position = 'fixed'
  •     var s = (binding.arg == 'left' ? 'left' : 'top')
  •     el.style[s] = binding.value + 'px'
  •   }
  • })
  • new Vue({
  •   el: '#dynamicexample',
  •   data: function () {
  •     return {
  •       direction: 'left'
  •     }
  •   }
  • })

    • 6.事件 & 按键修饰符

    对于 .passive、.capture 和 .once 这些事件修饰符，Vue 提供了相应的前缀可以用于 on：

    例如：

     
 
 
 
      
  
  
  
  
    1. on: {
      2. 
  
  
  
  
    2.   '!click': this.doThisInCapturingMode,
      3. 
  
  
  
  
    3.   '~keyup': this.doThisOnce,
      4. 
  
  
  
  
    4.   '~!mouseover': this.doThisOnceInCapturingMode
      5. 
  
  
  
  
    5. }
      6.

    对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

    7.依赖注入

    在Vue中，有几种方法可以让两个组件进行通信，所有这些方法都有优点和缺点。2.2版本中引入的一种新方法是使用 Provide/Inject 的依赖注入。

    这对选项一起使用，允许一个祖先组件作为其所有后代的依赖注入器，无论组件层次有多深，只要它们在同一个父链上。如果你熟悉React，这与React的上下文功能非常相似。

     
 
 
 
      
  
  
  
  
    1. // parent component providing 'foo'
      2. 
  
  
  
  
    2. var Provider = {
      3. 
  
  
  
  
    3.   provide: {
      4. 
  
  
  
  
    4.     foo: 'bar'
      5. 
  
  
  
  
    5.   },
      6. 
  
  
  
  
    6.   // ...
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. 
  
  
  
  
    9. // child component injecting 'foo'
      10. 
  
  
  
  
    10. var Child = {
      11. 
  
  
  
  
    11.   inject: ['foo'],
      12. 
  
  
  
  
    12.   created () {
      13. 
  
  
  
  
    13.     console.log(this.foo) // => "bar"
      14. 
  
  
  
  
    14.   }
      15. 
  
  
  
  
    15.   // ...
      16. 
  
  
  
  
    16. }
      17.

    今天就到这了，就这?

    名称栏目：这七个Vue模式，可能你经常用！但现在看对你很有帮助！
    浏览地址：http://www.shufengxianlan.com/qtweb/news25/280625.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网页设计公司知识

    各行业网站

    网页设计制作　　 　卡多尼人工智　　 　成都网站建设　　 　广安网站建设　　 　重庆企业网站建设　　 　响应式网站设计　　 　高端网站建设　　 　郫县明安消防器材　　 　网站SEO优化排名　　 　重庆电商网站定制　　 　成都商城网站建设　　 　成都棕树机房　　 　自贡电信机房　　 　户外广告设计　　 　成都app软件开发　　 　企业网站设计　　 　胜锦安防科技　　 　成都户外广告牌设计　　 　郫县网站建设　　 　服务器托管