一、window,open()配合this.$router使用
1.打开新窗口传参
javascript">// 待传递的参数
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.跳转页面接收参数
javascript">// 正确的window.open的传参写法
let apiTemp = JSON.parse(this.$route.query.apiTemp)
let testName=apiTemp.testName
let testCode=apiTemp.testCode
注意，绑定的路由需要在路由管理的index.js处先注册
二、slot-scope插槽
表格中动态绑定input输入框的值
javascript"><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就包含了当前行的数据。根据当前行的信息，即可将输入框的数据动态绑定到数组的值上，数组设置成：
javascript">vModelList[
{label:'',value:''}
]
//其中label我用于读取值的时候做判断用，value就是绑定的值
三、v-html的用法
时常有这种需要：后端传来数据，前端要动态地将它们渲染成html显示。vue提供了强大的工具：v-html
在使用时，你只需要在需要渲染的标签上加上v-html="content"即可完成渲染
javascript"><div id="caseContent" v-html="contents"></div>
其中contents就是即将要渲染的内容
通过所在div的id，我们就可以实现各种样式的调整 //非常好用
javascript">#caseContent{
height:600px;
padding: 10px
}
四、异步问题
这样一种情况：
点击按钮a的时候，在handleClick里同时执行n个函数n1,n2,n3…，会发生什么？
答案是这些函数会异步执行而非顺序执行
这就导致了一个问题，如果n2的执行依赖于n1的数据，那么很可能会发生cannot read property of xxx的错误，因为两个函数同时执行，n2执行时n1的结果还没传过来
解决方案：
如果n1涉及到ajax，那么就把n2放到n1的回调函数里执行，以避免数据不及时的问题
javascript">handleClick(){
this.n1()
this.n2()
}
//修改为
handleClick(){
this.n1(()=>{
/**
n1代码块执行完毕
*/
this.n2()
})
}
五、动效——transition
在VUE普遍使用以前，做一个淡入淡出的动效颇为麻烦，你需要对DOM进行一系列操作，还要配置相应的class。
而Vue为我们提供了强大的工具——transition
使用方法：
1、在控制内容显隐的标签——也就是写了v-show的标签上，绑定style
javascript"><p v-show="ifShow" :style="contentClass"></p>
2、在该部分外面套接transition标签，同时规定name=“fade”
javascript"><transition name="fade">
<p v-show="ifShow" :style="contentClass"></p>
</transition>
3、加入v-bind控制渐入渐出的时长
javascript"><transition :duration="{enter:1000,leave:800}" name="fade">
<p v-show="ifShow" :style="contentClass"></p>
</transition>
//其中，enter代表渐入时间，leave代表渐出时间，单位是毫秒
六、混入
不需要那么多复杂的概念，实际上混入就是继承
被混入的组件，会继承混入对象的属性与方法
Vue中组件与混入对象是多对多的关系，即是说一个组件可以混入多个混入对象，一个混入对象，也可以被多个组件使用
1、在html中使用：
javascript"><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文件
javascript">const mixin = {
data() {
return {
testData: 'hello mixin',
}
}
}
export default mixin;
s2、在指定组件引入该混入对象
javascript">import mixin from '@/components/MinXins/mixin.js'
export default {
mixins: [mixin],
}
s3、全局注册混入
s3.1
在main.js文件中使用Vue.mixin()
javascript">import mixin from '@/components/MinXins/mixin.js'
Vue.mixin(mixin);
s3.2
另一种写法，实例内部混入
在main.js中使用Vue.mixin({})
直接在mixin里面写
javascript">Vue.mixin({
data() {
return {
msg:'hello vue.mixin'
}
}
})
七、this.$emit(‘funcName’,param)传递参数并执行
子组件向父组件传值的方式有很多，其中一种就是emit函数，这个函数非常好用，它可以传参的同时直接调用父组件的指定函数
子组件中：
javascript">this.$emit('fatherFunction', data);
父组件中：
1、导入子组件并加载
javascript">// 导入
import sonComponent from './coms/sonCom'
// 加载
components：{
sonComponent
}
2、使用组件
javascript"><sonComponent v-on:listenTochildEvent="showMessageFromChild"></sonComponent >
绑定的处理函数为：
javascript">showMessageFromChild(data){
console.log("子组件的参数为>>>>>>>>>>>>"+JSON.stringify(data))
}
结尾：这都是项目中一些常常用到的知识，可以帮助一些初学者。感谢阅读，帮助到你希望你能多多转载去帮助更多的人
