杂记：Vue 开发 “踩坑”记录

Vue CLI 中 img src 动态赋值

说起 img src 动态赋值，可能大家第一反应就是：“这不就是属性的动态赋值吗？简单！”。然后就洋洋洒洒的写出下面的代码：

HTML

 <img :src="imgSrc" class="img-responsive">

JS

imgSrc: `@/assets/images/instragram/instragram1.jpg`

一开始，我是这样想的。也这样写出来了。结果一 run 。图片死活不出来。
很悲催呀！代码反复看了很多遍，项目配置也反复核查了。就是找不出原因，不得以，求助广大的网友前辈，才知道：
在 Vue CLI 中 因为 使用 webpack 的原因，img src 动态赋值需要使用 require()。不然，webpack 是不会处理后来在载入的 imgSrcd 。

JS改成下面这样就行了。

imgSrc: require(`@/assets/images/instragram/instragram1.jpg`)

自定义组件实现v-model

自定义组件也是可以实现v-model双向绑定的。
Vue 官方文档介绍如下：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

官方文档案例：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

这样，我们就可以在自定义组件使用v-model了：

<base-checkbox v-model="lovingVue"></base-checkbox>

需要注意的是：

1. model:{prop:'checked'} 这里的checked 必须在props 里也有声明；
2. model.prop 绑定的变量命名不能是关键字。如：value
3. model.prop绑定的变量不要在自定义组件里直接改动。需要调用model.event来修改绑定的变量的值。例如，上面的例子，就不能在自定义组件内再对checked进行双向绑定。

Element-ui: Vue 中 阻止 element-ui 组件事件冒泡

在开发时，想要实现点击非 特定某个element-ui 组件区域，关闭这个特定 element-ui。将关闭事件绑定到最外层的 div 中。结果，点击其他区域关闭事件成功触发。但悲催的是，点击这个 element-ui 组件关闭事件也触发。
这时，我立即想到事件冒泡了。立即给组件补上 @click.stop。结果死活不生效。
找了很久才看到官方文档这么一段话：

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符。

也就是自定义组件如果要成功执行原生事件需要加上.native修饰符。

还有就是，element-ui 提供那些组件是组件，是自定义组件。一开始我就没有意识到这一点，才没有往那边去考虑。

Element-ui：在<el-form>不设置rule的时候 resetFields 失效

element-ui 的表单组件提供一系列的方法。具体查看：Form Methods
这些方法在使用时需要配合验证规则来使用的。当我们不为 <el-form> 配置表单验证的设置时，这些方法就会无法发挥正常的作用。
<el-form>组件对form字段的识别是依靠prop属性来进行。

  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

只要为 form 字段设置了prop属性。<el-form>组件就可以识别出需要处理的字段，然后对它们进行相应的操作。
所以，如果不为<el-form> 设置rule，最好也要补上prop。这样 resetFields也就能生效了。