Vue.js笔记

整理的一些笔记一些自己在学习Vue中遇到的一些问题，都很简单的一些笔记

    props: ['value'], //父组件->子组件传值设置

$ref介绍

v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记，然后通过this.$refs获取

   <button value="11111" ref="a" @click="click" data-id="1">22222</button>

  console.log(this.$refs.a.getAttribute('data-id'))

侦测路由变化问题

根据watch来检查 $router的变化

Paste_Image.png

keep-alive数据缓存与刷新、局部缓存问题

router-view设置好keep-alive
keep-alive如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive指令参数：

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
  </component>
</keep-alive>

<keep-alive>
       <router-view></router-view>
 </keep-alive>

router-view.png

activated
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。

activated(){
        this.toDo();
      },
      methods:{
        toDo:function () {
          this.get(); //重新请求数据
        },

vue-router路由跳转问题$route

<span>当前路径：{{$route.path}}</span>
<span>当前参数：{{$route.params }}</span>
<span>路由名称：{{$route.name}}</span>
<span>路由查询参数：{{$route.query.a}}</span>
//JS代码中路由跳转
router.go({name: 'user', params: {userId: 1}});

this.$router.push({path:'/pictureDetail',query: {id: id}});

检查路由的改变
![Uploading Paste_Image_016434.png . . .]

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  console.log('router msg:');
  console.log(to,from,next);
  next({
    path: to.path,
    query: from.query
  })
})

路由信息.png router1.png

路由配置默认路由设置

export default{
 mode: 'history', //去掉#号
  //history: true,//启用HTML5 history模式
  hashbang: true, //将路径格式化为#!开头
  routes:[
    {path:'/mine', component:Mine},
    {path:'/home', component:Home},
    {path:'/news', component:News},
    {path:'/come', component:Come},
    {path:'*', redirect:'/home'}
  ]
}

Paste_Image.png

父组件事件如何传给子组件使用

父链指的是因组件之间的嵌套关系产生的关系链，Vue定义了三个关于父链的变量：

this.$parent：指向父组件的实例；
this.$root：指向根实例对象；
this.$children：父组件的一个数组，包含它所有的子元素；

子组件向父组件通讯

父组件

<template>
  <div id="app">
    <header>
      <i class="icon-back" v-on:click="backwards"></i>
      {{title}}
    </header>
    <transition :name="transitionName">
      <router-view class="view" v-on:viewIn="changeTitle"></router-view>
    </transition>
  </div>
</template>

子组件

子组件中定义了一个方法
methods: {
  viewIn: function(){
    this.$emit('viewIn',"首页")
  }
}

如何在自动触发viewIn这个方法，

created (){
      this.$emit('viewIn',"投注站");
    },

Paste_Image.png