Vue 使用中的小技巧(3)

日期：2020-05-11 栏目：程序人生浏览：次

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为： multi-condition 、 basic-table 最后我们在main.js中import 'components/componentRegister.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

4. 不同路由的组件复用

4.1 场景还原

当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router"智能地"发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，如下：

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
},
watch: {
 '$route': { // 使用watch来监控是否是同一个路由
 handler: 'resetData',
 immediate: true
 }
},
methods: {
 resetData() {
 this.loading = false
 this.error = null
 this.post = null
 this.getPost(this.$route.params.id)
 },
 getPost(id){ }
}

4.2 优化

那要怎么样才能实现这样的效果呢，答案是给 router-view 添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。

<router-view :key="$route.fullpath"></router-view>

还可以在其后加 + +new Date() 时间戳，保证独一无二

5. 高阶组件

5.1 一般情况

// 父组件
<BaseInput :value="value"
  label="密码"
  placeholder="请填写密码"
  @input="handleInput"
  @focus="handleFocus">
</BaseInput>
// 子组件
<template>
 <label>
 {{ label }}
 <input :value=" value"
  :placeholder="placeholder"
  @focus="$emit('focus', $event)"
  @input="$emit('input', $event.target.value)">
 </label>
</template>

5.2 优化

1 每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以使用 $attrs 直接从父传到子，无需声明。方法如下：

<input :value="value"
 v-bind="$attrs"
 @input="$emit('input', $event.target.value)">

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

Vue 使用中的小技巧(3)

相关推荐