整理的一些笔记一些自己在学习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
