Vue.js笔记

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

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

$ref介绍

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

   22222

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

侦测路由变化问题

根据watch来检查 $router的变化

Paste_Image.png

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

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

router-view.png

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

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

vue-router路由跳转问题$route

当前路径：{{$route.path}}
当前参数：{{$route.params }}
路由名称：{{$route.name}}
路由查询参数：{{$route.query.a}}
//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：父组件的一个数组，包含它所有的子元素；

子组件向父组件通讯

父组件

子组件

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

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

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

Paste_Image.png