Vue的⼏个常⽤难点
⼀、window,open()配合this.$router使⽤
1、参数发送页
// 待传递的参数
var apiTemp ={}
// 与地址绑定，⽣成对象
const routeDate =this.$solve({
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 stName
let stCode
注意，绑定的路由需要在路由管理的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
transition用法搭配使⽤⽅法：
1、在控制内容显隐的标签——也就是写了v-show的标签上，绑定style
<p v-show="ifShow":></p>
2、在该部分外⾯套接transition标签，同时规定name=“fade”
<transition name="fade">
<p v-show="ifShow":></p>
</transition>
3、加⼊v-bind控制渐⼊渐出的时长
<transition :duration="{enter:1000,leave:800}" name="fade">
<p v-show="ifShow":></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))
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。