Vue 组件 / 杂项

利用v-model实现自定义的表单组件

在vue中，表单都可以使用v-model来实现双向数据绑定，看着v-model很神奇，但实际上这是一个vue的语法糖(语法糖指并没有实际为计算机语法添加新东西，只是使语法对于阅读和使用的人来说更加容易理解)，v-model实际是以下方式的简写

如果能够理解了上面的写法，那么我们就可以自己实现一个v-model的表单组件

这个组件想要生效那么需要有两个必要的条件

• 接受一个value属性
• 在有新的值的时候触发input事件

    
利用v-model实现自定义的表单组件
    
CounterBtn组件的值{{btnValue}}
    
    
    

        绑定值到input隐藏域中
        
        
    

is

子组件索引(ref)

在组件中有时我们需要在javascript中直接访问子组件。为此我们可以使用ref为子组件指定一个索引ID，由此来获得组件内的参数，数据等内容

    
    

        Lorem ipsum dolor sit amet, consectetur.
    

当ref和v-for一起使用的时候，ref是一个数组，数组内包含对应的子组件
需要特别注意的是ref只在组件渲染完成后才能填充，并且ref并不是响应式的

异步组件

在页面载入的时候，我们有时候不需要一次性的将所有的组件全部载入，尤其是当一些组件是需要在被触发才需要显示的情况，一次性全部加载会让我们第一次加载的文件变大，拖慢我们的搜词加载速度，所以我们需要用到异步组件

    
{{msg}}
    

vue允许我们为组件定义一个工厂函数，使用promise，在需要的时候触发工厂函数渲染，并且会将结果存储起来，用于后面的再次渲染，这里的settimeout只是为了示例效果，我们可以根据实际开发需要定义触发resolve的条件
如果我们想要所有的组件都是异步加载的，那么可以采用下面两种写法

  new Vue({
    //...
    components:{
        Banner: () => ({
        component: import("components/Banner")
        })
      }
  })

  const Banner= Vue.component("Slider", resolve=>{
     require(['../Slider.vue'], resolve)
   })

高级异步组件

自 2.3.0 起，异步组件的工厂函数也可以返回一个如下的对象：

const AsyncComp = () => ({
  // 需要加载的组件。应当是一个 Promise
  component: import('./MyComp.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComp,
  // 出错时渲染的组件
  error: ErrorComp,
  // 渲染加载中组件前的等待时间。默认：200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
  timeout: 3000
})

注意，当一个异步组件被视作为vue-router的路由使用时，这些高级选项都是无效的，因为切换路由前就会提前加载所需的异步组件。另外，如果要在路由组件中使用改写法，需要vue-router2.4.0以上版本