vue随笔记录

1.事件总线的全局注册不要写在main.js文件最下面，似乎调用$on之类有问题

2.state中的值可以放在computed中直接使用，在方法中传入直接写this.uid即可

computed:{
  uid(){
           return this.$store.state.uid
   }
}

3.使用flex-direction样式对文字布局，困扰了半天怎么把flex中文字上下排版

4.子组件的methos中可以使用watch取到props传来的动态值，用this.动态值取不到，但methos中调用路由直接this.动态值可以取到，在子组件中this.$route.params.id可以取到路由最后的id

5.给flex某个盒子设置宽度无效时，试着加上flex-shrink: 0;

6.使页面重新加载，点击不同的歌单渲染不同的页面

网上提供方法

<template>
   <third-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
 
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

试了下，没起效果，自己想了下可以在离开页面时在

deactivated(){
   this.playlistitem = [];
   this.playlistsong = [];
}

中将页面数据置空，在进入时在

activated() {
       
 },

重新请求数据

7.给input的focus状态下设置border不起效果，这时候设置outline:none才有效果

.search-input input:focus{
  outline: none;
}

8.使用swiper时渲染图片数据最好在前面加上v-if判断条件，其中有DOM，网络请求的一些问题，加上判断能避免一些麻烦，例如定义loop:true无效报错等

<swiper :options="swiperOption" v-if="playlistswiper.length">
//playlistswiper是网络请求的数据
</swiper>