Vue使用小技巧（注意事项--坑点）

1.给子组件动态传入数据（$attrs使用）

// 父组件

<parent />

// 子组件(第三方组件--quasar)
// 组件中的字段不确定(filled outline standout ……)，如何根据需要填入对应的值，而不需要在子组件中props所有可能出现的值

<child />  ---->  <q-select />

方法：

父组件（parent）----按需传入对应值（如：filled: true）

子组件（child ）-----v-bind="{ ...$attrs }"即可自动传入对应值

2.祖父——>父亲——>儿子组件传值问题（slot使用）

// 祖父(parent-parent)组件中
<parent>
    <template #slotName="{ value }">
        {{value}} // 儿子/孙子组件传过来的值
    </template>
</parent>

// 父亲(parent)组件中(必须写 template  否则获取不到值)
<son>
    <template #default="{ value }">
       <slot name="slotName" v-bind="{ value }"></slot>
    </template>
</son>

//儿子（son）组件中
<child v-slot:slotName2="value">
    <slot v-bind="{ value }"></slot>
</child>

    或者(第三方组件自定义插槽内容---如:quasar----q-select自定义菜单项)

<template v-slot:option="value">
    <slot v-bind="{ value }"></slot>
</template >

3.Flex布局在浏览器缩放时，内部页面改变大小缓慢造成页面一点一点缓慢缩小的问题（表格组件中常见）

原因：使用flex布局进行自适应时，计算缓慢；再加上表格组件在进行缩放时的宽度计算也要耗费一些时间；因此，导致页面不是一下缩小而是一点点的缓慢缩小或者盒子从右到左慢速飞入的情况。

解决办法：将flex布局改为float浮动布局格式

代码如下：

<div class='container'>
	<div class='left'></div>
	<div class='right'>
<div>
<style>
.left {
	float: left;
	width: 200px;
}
.right {
	float: left;
	width: calc(100%  -  200px);
}
或者
.right {
	margin-left: 200px;
}
<style>

具体见: https://blog.csdn.net/blueshenmi/article/details/87779901 

4.根据第三方组件侧边栏sider展开/缩放计算盒子大小

可以通过VUE @hook（监听子组件的生命周期钩子）的方式监听第三方组件的变化

代码如下：

<第三方组件 ref="child" @hook:updated="updatedFn" />

script代码：
updatedFn () {
    const var = this.$refs.child.要监听的变量
    console.log(var) //第三方组件要监听的变量的值，可以根据该值变化情况设置本组件的参数值
}

5.父组件向子组件传值时，值已经传过来却没有出发组件的watch监听

因为改变了数据，但没有出发视图更新……

注意：

 链接：https://www.cnblogs.com/chen-yi-yi/p/10998907.html

6.更新了数据，但页面数据未刷新（同样是未出发视图更新），原因同上……

data(){
    aa: {
        aa1: ''
    }
}

更新值：
this.aa.aa1 = 1

结果就是：值更新了，页面数据未更新


原因是未触发视图更新

解决：
this.aa = {
    aa1: 1
}

这样就可以了

7.实现跨组件插槽（4层组件），代码如图：

一级（引用FORM组件的vue）:

itemlist:[{上图内容}]

 自定义插槽区（根据需要添加，注意：名字和长度得与一图slots内容一致）

二级页面（form表单组件）：

 三级页面（quasar框架input组件）：

 效果图：

如果一个页面有多个相同插槽名称的插槽，比如表单组件中存在多个input组件的情况下，代码如下：

 8.git合并（merge）代码后未推送（push），撤销合并的代码

git reset --merge ORIG_HEAD

 9.async/await与$nextTick结合使用

        当async-await获取某一个refs组件的函数时报错undefind，获取不到refs组件。

async aa() {
    return await this.$refs.refName.fn() //报错 无法找到 refName组件
}

解决方案：
async aa() {
    await this.$nextTick() //处理代码前添加这一句就行
    return await this.$refs.refName.fn() //报错 无法找到 refName组件
}

错误方案：无法获取到想要的内容
async aa() {
    return await this.$nextTick(async () => {
        return await this.$refs.refName.fn() //报错 无法找到 refName组件
    })
}

 10.vxe-table中tree-config.transform与row.children冲突问题

        vxe-table树形表格，数据为平铺list格式，通过transform:true自动转为树形。改变数据时（如自定义复选框时需要改变checked属性值），报错：
        [vxe-table v3.6.17] 参数“tree-config.transform” 与 “row.children” 有冲突 

        解决方案：Object.freeze() 即：赋值时用此函数包裹

11.webpack打包时忽略指定文件

        因本人项目使用的是qiankun微前端功能，而主应用与子应用使用了相同的插件及前端组件，这就导致了子应用的前端样式重复渲染。我查询了很多资料，最终确定的解决方案是，webpack打包时，子应用不打包对应样式，这样就避免了加载重复样式的问题（前提是主、子应用插件版本一致）。

new webpack.IgnorePlugin({
  checkResource(resource) {
    // do something with resource
    return true | false;
  },
});

此代码由webpack官方提供：IgnorePlugin | webpack

12.addEventListener第三个参数

第三个参数为布尔值：可选参数，表示事件是否在捕获或冒泡阶段执行。如果是 true，则在捕获阶段执行，如果是 false（默认值），则在冒泡阶段执行。

案例：quillEditor编辑器粘贴图片时，监听“paste”粘贴事件。快速ctrl+v时，导致多张图片被粘贴（背景是evt.preventDefault()阻止了默认时间，通过上传接口上传图片）后却无法被监听到，上传接口只请求了一次，其他图片路径为base64码，编辑器内容超长无法保存。这里需要把第三个值设置为true，指定在捕获阶段执行才能达到想要的效果。

13.$refs值注意事项

案例：通过$refs获取vxe-grid(vxe-table插件)后，再通过Object.freeze()重新赋值后，展开项功能失效，通过key值控制刷新数据，同时另一个问题就是：通过上面$refs获取的值（定义的const）无法生效vxe-grid相关API，必须重新通过$refs获取vxe-grid才能生效。

<vxe-grid ref="table" :data="treeData" :key="keys" />

data () {
    return {
        keys: 1
    }
}

aa () {
    const $table = this.$refs.table
    ...
    this.keys = new Date().getTime()
    this.treeData = Object.freeze(data)
    ...
    this.$refs.table.xx() // vxe-grid API
}