Vue学习笔记

vue流行了有好些年了，语法不断的完善，功能不断的创新，需要不断的学习，不断地学习，不断的学习。

1.父子组件通讯

父子组件之间的数据传递，主要通过props属性，这个属性是单项传递的，只能从父组件向子组件传递数据，子组件不能修改父组件传递的数据，或者说子组件修改了传入的数据，是反应不到父组件上的。但是自2.3版本之后，vue新增加了.sync修饰符，在父组件向子组件绑定数据时，加上此修饰符，子组件通过调用this.$emit(“update:data”,data),可以修改父组件传入子组件的data数据，这样数据的传递就变成了双向的了。

2.非父子组件之间的通信

复杂的情况下，可以使用vuex，普通情况下，可以采取中间件的形式，构造一个父组件，包含两个子组件，通过中间件父组件，一个子组件通过this.$emit()将事件传递给父组件，父组件监听这个事件，然后将数据更新传递给另一个组件。

3.静态资源的引入

(1) style样式中的资源引入：
vue cli3.0中可以使用相对路径进行模块的加载，比如下面这张图中的组件App.vue中引入assert/images/bg.jpg，可以通过”../../assert/images/bg.jpg”。

最终会被编译成img/bg[ hash ].jpg

如果目录再深一层，则需要多加一个 ‘../‘ ：

(2) template模板中的资源引入：
template模板中可以使用 @ 符号代替 /src 目录，但是在scss中就不可以。官方有句话也说明了这种情况”如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)”。

1

<img src="@assets/img/vapor.png"/>

(3) html静态文件中的资源引入：
在html中，不能通过assert文件夹引入资源，应该使用public/css或者public/js等的文件引入资源，因为经过编译后assert就没有了，而static文件夹是原样保留打包后的在dist文件夹中

总结：在template模板中的资源可以使用@符号，对于scss样式中的资源只能使用相对路径，而对于html中的资源只能引入public中的文件了,通过import 引入时，也可以使用@符号。

(4) static和public
在早期版本中有static文件夹，现在3.x版本中去掉了static文件夹，改成了public文件夹。他们都有共同的特点，就是里面的文件不会被处理，直接复制到最终生成的dist目录中。所以也可以适用绝对路径进行图片的引入，这个时候就要求图片在public/img的文件夹下了,比如：http://localhost:8080/img/vapor.png

1

<img v-bind:src="baseUrl+'/img/'+item.Icons"/>

4.针对单个文件禁用eslint

在代码顶部添加一行注释
/* eslint-disable */
ESLint 在校验的时候就会跳过后面的代码,还可以在注释后加入详细规则，这样就能避开指定的校验规则了
/* eslint-disable no-new */

5.vue中使用refs定位dom出现undefined

我是做地图，openlayer有个特点就是，如果一个map挂载到一个div结构上，这个div如果是隐藏的，那么他就不能正确的设置地图的宽和高，即使这个dom后来通过样式控制显示出来了，最终的结果也是错误的，地图会呈现出明显的被拉伸的情况：

这个时候，需要在dom结构完全显示之后，手动调用 map.updateSize() 函数即可解决。问题是在什么时候调用这个呢？通常情况下，会在vue的mouted函数中，通过 this.$nextTick(function(){ map.updateSize()})就可以了。但是如果挂载点是在v-if，v-for等挂载的，mouted可能就无法及时的获得$refs中的mainmap对象，原因如参考文章中所说：

1
2
3
4
5
6
7
8
9

经过检验，上面端文字是错误的，$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

　　如果想要真正地在DOM加载完成后拿到数据，就需要调用VUE的全局api ： this.$nextTick(() => {})

　　如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

　　updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！，而mounted仅仅只执行一次而已

　　简单来说，只要在调试的时候，能看到元素的存在，在updated阶段都可以使用this.$refs.xxx找到对应的DOM节点！

最终将地图刷新的代码移到了update生命周期中:

1
2
3
4
5
6
7

updated(){
  //更新地图
  this.$nextTick(() => {
    const map = this.$refs.mainmap.map;
    map.updateSize();
  });
}

6.特殊变量$event

这个变量非常有用，官方解释为：“有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：”,这样就实现了在传递自定义事件参数的同时，可以传递原生的event。

1
2
3
4
5
6
7
8
9
10
11
12
13

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

更直观的例子是这样的，比如我在使用elementui组件时，通过for循环创建了多个checkbox，然后为每一个checkbox绑定了点击事件，这个时候，我想在点击事件发生时获取到点击的元素怎么办呢？我们知道，通过for循环创建的checkbox是相互独立的，而且他的change事件只有一个参数，“更新后的参数”，这个时候我们就可以使用$event特殊变量了，同时传入item和$event，这个$event就绑定到了“更新后的参数”。

1
2
3
4
5
6
7
8
9
10
11
12
13

 <div class="list-wrap left-item">
  <ul>
    <li v-for="(item, index) in subprojectList" :key="item.id" class="item-wrap">
      <div class="title-wrap">
        <span class="title-index">{{index+1}}.</span>
        <span class="title-name">{{item.name}}</span>
        <el-checkbox class="map-distributed" @change="drawProjectMap(item,$event)">地图分布</el-checkbox>
      </div>
      <div class="item-content">
      </div>
    </li>
  </ul>
</div>

在methods中的方法为：

1
2
3
4
5
6
7
8
9

methods: {
   drawProjectMap(project,event){
     console.log(project);
     console.log(event);
   },
 }
//输出的结果为
// {}
// true