关于vue工作中遇到的小坑
前提项目是用脚手架工具生成的,项目用到的技术是vue webpack 和scss
1.引用定义组件的时候需要注意的点
import button from '../../components/button/Button' //在引用组件时,不要用html关键字作为名字,这样在解析的时候它会当成html元素来解析,例如这里用了button,它会当做html的元素。
2.父组件中定义一个方法,让子组件中的按钮点击的时候调用
父组件:
<buttonComponent @commonalityBtn="ServiceList">{{ service }}</buttonComponent>
methods: {
ServiceList () {
router.push({
name: 'search',
params: this.ListParameter
})
}
子组件:
<button type="button" @click="commonality"><slot></slot></button>
methods: {
commonality () {
this.$emit('commonalityBtn')
}
}
3.在vue文件里引入scss文件需注意的点
第一步引入scss文件:import styles from './land.scss'
第二步将styles变量配置在data里
data () {
return {
styles
}
}
第三步使用样式:<span :class="styles.list">选择产品类别</span>
4.根据不同情况显示不同样式的时候需注意要写在数组中例如:
:class="[{'seek' : shouldShow },{'find':should}]"
:class="{'seek' : shouldShow,find:should}"
:style="{'seek' : shouldShow,find:should}"
5.vue实现手风琴(我的代码前提是数据是从父组件传入子组件的,点击父组件的导航显示子组件并实现手风琴)
父组件:
vue:
<selectionGroup v-for="(pulldow,index) in sortName" :childKey="pulldow,index,seq" @groupClick="groupClick"></selectionGroup>
js:
data () {
return {seq:0,}
},methods{
groupClick(_index){
this.seq=_index;
}
}
子组件:
css:
.groupBlock{display: block}
.groupNone{display: none}
vue:
<li>
<span @click="loadGroup()" class="panel-title">点击查看内容<i class="accordion-title"></i></span>
<div :id="index" :class="[{'groupNone':index!=seq,'groupBlock':index==seq}]"></div>
</li>
js:
export default {
methods: {
loadGroup(){
this.$emit("testclick",this.index);
}
},
props: {
childKey: {type: Object},
index:{type:Number},
seq:{type:Number}
},
}
6.需求:点击一下展开,点击一下合上(前提界面所有的东西都是循环遍历出来的,并且有多个tab卡,每个卡里有多个需要显示隐藏的块)(代码前提:点击的动作是在父组件中,展开收起的部分在子组件中)
子组件:
vue:
<div @click="toggle" class="group-title">
<div>{{section.title}}</div>
</div>
<div v-show='shouldShow'>
<GroupChild :section='section'></GroupChild>
</div>
js:
export default {
data(){
return {
shouldShow: false,
}
},
methods: {
toggle(){
this.shouldShow = !this.shouldShow;
}
props: {
section: {
type: Object
},
isActive: {
type: Boolean
}
},
watch: {
// 回显:修改数据后展开,否则闭合
isActive(val, oldVal) {
if (val && this.section.isChange) {
this.shouldShow = true;
} else {
this.shouldShow = false;
}
}
}
}
父组件:
<GroupItem v-for="section in item.sections" :section="section" :isActive="isActive"></GroupItem>
props: {
isActive: {
type: Boolean
}
}
7.Vue中如何让v-for循环出来的列表里面的click事件只对当前列表内元素有效
<li v-for='item in items' @click="toggle(item)">
<span v-show='item.show'>{{item.content}}</span>
</li>
toggle:function(item){
item.show=!item.show
}
8.子父元素都有点击事件时如何不相互干扰
<div @click="parentClick">
<div @click.stop="childClick"><div>
</div>
9.频繁切换用v-show,很少改变用v-if
v-if初始化时不渲染,条件满足时渲染,有更高的切换开销
v-show初始化时渲染,有更高的初始化开销,条件满足时,只是改变了display的值
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步