vue很有用的小知识（持续更新）

最新推荐文章于 2022-08-19 16:25:51 发布

独孤求赞

最新推荐文章于 2022-08-19 16:25:51 发布

阅读量228

点赞数 1

分类专栏： vue 文章标签： es6 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44989478/article/details/108826685

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.通过ref操作子组件的事件并传值

直接上代码

父组件中
<template>
 	<model  ref='openModel'  :receivedata="this.receivedata"></model> //子组件
 	<div @click="revise">修改</div>
</template>

methods:{
	revise(){
       this.$refs.openModel.openValue(true);
	},
}

子组件
<template>
	<div>
		<h1 v-show="dialogVisible"></h1>
	</div>
</template>

  props: {  //通过prop传的值
    receivedata:Object,
  },
  data(){
	return {
		dialogVisible:false,
	}
  },
  methods:{ //通过ref传的值
    openValue(val){
        this.dialogVisible=val;
    },
  }

2.修改父组件或者根组件data的值

 this.$parent.isOpen=false;  //修改父组件的data
 this.$root.isOpen=true;  //修改根组件

3.保存vuex的state，使其刷新后不会消失

   
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
   
      window.addEventListener("pagehide",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })

4.v-if和v-show区别和应用场景

v-show是通过设置css中的display来控制显示和隐藏的
v-if是动态的向DOM树内添加或者删除BOM元素

其实说来就是回流与重绘的知识了，不知道的赶紧去翻下我的帖子，
很明显v-show就是单纯的重绘，v-if是回流+重绘，
当然，回流是一定会重绘的，所以说v-if会有更大的性能消耗，
if
需要频繁的切换肯定是要用v-show
else
使用v-if

总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

ok,本文到此没有结束，敬请下次更新。最后提醒，请看下本人的昵称