Vue2.x -- 解决vue2editor文本框报错、作用域插槽、对象解构赋值、VsCode支持Vue文件配置

解决vue2editor文本框报错

• 报错提示: [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInsertedIntoDocument' event.
• 原因:vue-editor无法编译div标签
• 解决方法:replace()方法,可以尝试把数据中的 div 标签换成 p 标签
• 语法: 例如vue-editor标签中绑定的内容为content, content.replace(/div/g,'p')

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
语法:stringObject.replace(regexp/substr,replacement)
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。
如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。
否则，它只替换第一个匹配子串。

作用域插槽slot-scope/具名插槽

控制组件部分区域展示自定义数据,可以用slot-scope来展示,

//父组件
<template slot='scopeTitle'>
	<h1>插槽</h1>
</template>
<template slot-scope="scope">
	{{scope.row.name}}
<template>


//子组件
<div>
	//具名插槽
	<slot name="scopeTitle">
	<div v-for="item in arrList">
	//作用域插槽/默认插槽
		<slot :row="item" >
	</div>
</div>

//script
arrList:{
	name: 'Thomas'
}

但是在Vue 2.6.0开始 slot-scope就被废弃,被v-slot取代
新语法:

//父组件
//具名插槽写法
<template v-slot:scopeTitle>
	<h1>插槽</h1>
</template>
<template v-slot:default="scope">
	{{scope.row.name}}
<template>


//子组件
<div>
	//具名插槽
	<slot name="scopeTitle">
	<div v-for="item in arrList">
	//作用域插槽/默认插槽
		<slot :row="item" >
	</div>
</div>

//script
arrList:{
	name: 'Thomas'
}

对象解构赋值语法

例如: 请求回来的结果为 res.data.data中
一级解构:

axios().then(({ data }) =>{
 	console.log(data) //相当于解构了data,得到了返回值中的data
 }) //

二级解构

axios().then(({ data:{data:aa} }) =>{
 	console.log(aa) //相当于得到了返回值中的data.data.aa
 }) //

VsCode对Vue语法提示更友好,可以配置jsconfig.json

在任务文件夹根目录新建文件jsconfig.json
配置:

{
    "compilerOptions": {
      "target": "es2017",
      "allowSyntheticDefaultImports": false,
      "baseUrl": "./",
      "paths": {
        "@/*": [
          "src/*"
        ]
      }
    },
    "exclude": [
      "node_modules",
      "dist"
    ]
  }

配置后,引入封装的函数和属性会自动填充引入路径;点击文件路径可打开文件等支持

额外的查漏补缺:
new Set数组去重

new Set([11,22,33,44,55,11])
//[11,22,33,44,55]