Vue的几个常用难点

一、window,open()配合this.$router使用

1、参数发送页

// 待传递的参数
var apiTemp = {}
apiTemp.testName= row.testName
apiTemp.testClass = row.testClass
apiTemp.testCode = row.testCode
// 与地址绑定，生成对象
const routeDate = this.$router.resolve({
  path: '/testRouter',
  query: {
    apiTemp: JSON.stringify(apiTemp)
  }
})
// 在window.open的第一个参数使用对象的href属性
window.open(routeDate.href, '_blank')

2、参数接受页

// 正确的window.open的传参写法
let apiTemp = JSON.parse(this.$route.query.apiTemp)
let testName=apiTemp.testName
let testCode=apiTemp.testCode

注意，绑定的路由需要在路由管理的index.js处先注册

二、slot-scope插槽
假如遇到这样的情况：
后台将会传来n条记录，但是在前端的table展示时，不仅要展示这些记录，还要在最后一个字段每行放置一个用于输入参数的输入框，那么，如果只是简单使用v-model将输入框的值绑定在某一个变量上，则会发生数据污染，因为多个输入框共享一个内存地址
解决方法是插槽配合数组
代码如下

<el-table-column label="参数值填写" align="center"  min-width="100"  prop="number">
              <template slot-scope="scope">
	                 <el-input v-model="vModelList[scope.$index].value" placeholder="请输入...">	</el-input>
              </template>
</el-table-column>

其中，slot-scope就是插槽，slot-scope="scope"中的scope就包含了当前行的数据。根据当前行的信息，即可将输入框的数据动态绑定到数组的值上，数组信息为

vModelList[
	{label:'',value:''}
]

其中label我用于读取值的时候做判断用，value就是绑定的值

三、v-html
时常有这种需要：后端传来数据，前端要动态地将它们渲染成html显示。vue提供了强大的工具：v-html
在使用时，你只需要在需要渲染的标签上加上v-html="content"即可完成渲染

<div id="caseContent" v-html="contents">
          </div>

其中contents就是即将要渲染的内容
通过所在div的id，我们就可以实现各种样式的调整

#caseContent{
    height:600px;
    padding: 10px
  }

非常好用
四、异步问题
这样一种情况：
点击按钮a的时候，在handleClick里同时执行n个函数n1,n2,n3…，会发生什么？
答案是这些函数会异步执行而非顺序执行
这就导致了一个问题，如果n2的执行依赖于n1的数据，那么很可能会发生cannot read property of xxx的错误，因为两个函数同时执行，n2执行时n1的结果还没传过来
解决方案：
如果n1涉及到ajax，那么就把n2放到n1的回调函数里执行，以避免数据不及时的问题

handleClick(){
	this.n1()
	this.n2()
}
//修改为
handleClick(){
	this.n1(()=>{
		/**
		n1代码块执行完毕
		*/
		this.n2()
	})
}

五、动效——transition
在VUE普遍使用以前，做一个淡入淡出的动效颇为麻烦，你需要对DOM进行一系列操作，还要配置相应的class。
而Vue为我们提供了强大的工具——transition
使用方法：
1、在控制内容显隐的标签——也就是写了v-show的标签上，绑定style

<p v-show="ifShow" :style="contentClass"></p>

2、在该部分外面套接transition标签，同时规定name=“fade”

<transition name="fade">
	<p v-show="ifShow" :style="contentClass"></p>
</transition>

3、加入v-bind控制渐入渐出的时长

<transition :duration="{enter:1000,leave:800}" name="fade">
	<p v-show="ifShow" :style="contentClass"></p>
</transition>

其中，enter代表渐入时间，leave代表渐出时间，单位是毫秒
transition的功能并不止于此，留作考题，供读者自行探索
六、混入
不需要那么多复杂的概念，实际上混入就是继承
被混入的组件，会继承混入对象的属性与方法
Vue中组件与混入对象是多对多的关系，即是说一个组件可以混入多个混入对象，一个混入对象，也可以被多个组件使用
1、在html中使用：

<script type="text/javascript">
			let mixin={
				data:function(){
					return {
						message:'你好'
					}
				}
			}
			const vm=new Vue({
				mixins:[mixin],
				el:'#app',
				data:{
					mes:'VUE'
				},
				methods:{
					
				}
			})
		</script>

2、在vue-cli项目里使用
s1、新建mixin.js文件

const mixin = {
    data() {
        return {
            testData: 'hello mixin',
        }
    }
}
export default mixin;

s2、在指定组件引入该混入对象

import mixin from '@/components/MinXins/mixin.js'
export default {
  mixins: [mixin],
}

s3、全局注册混入

• s3.1

在main.js文件中使用Vue.mixin()

import mixin from '@/components/MinXins/mixin.js'
Vue.mixin(mixin);

• s3.2
  另一种写法，实例内部混入
  在main.js中使用Vue.mixin({})
  直接在mixin里面写

Vue.mixin({
    data() {
        return {
            msg:'hello vue.mixin'
        }
    }
})

七、this.$emit(‘funcName’,param)传递参数并执行
子组件向父组件传值的方式有很多，其中一种就是emit函数，这个函数非常好用，它可以传参的同时直接调用父组件的指定函数
子组件中：

this.$emit('fatherFunction', data);

父组件中：
1、导入子组件并加载

// 导入
import sonComponent from './coms/sonCom'
// 加载
components：{
	sonComponent 
}

2、使用组件

<sonComponent v-on:listenTochildEvent="showMessageFromChild"></sonComponent >

绑定的处理函数为：

showMessageFromChild(data){
	console.log("子组件的参数为>>>>>>>>>>>>"+JSON.stringify(data))
}