月度归档:2017年02月

Vuejs 实用技巧

1.组件如何通过vue-router传递参数:

这里传递的参数希望不显式的添加在url上面,具体代码如下:

路由配置:

new Router({
  routes: [
    { path: '/', component: Index, name: 'index'},
    { path: '/mv/:id', component: Mplayer, name: 'mv'}
  ]
})

组件一设置参数:

<router-link :to="{ name: 'mv', params: { id: mv.id, poster: mv.cover, mvName: mv.name }}"></router-link>

组件二获取参数:

this.video.poster = this.$route.params.poster;
this.mvDetail.name = this.$route.params.mvName;

2.如何在事件内触发DOM元素的原生事件:

以点击回车键收起手机键盘为例,具体代码如下:

<form @submit.prevent="submit" action="">
  <input type="search" placeholder="搜索" v-model="searchKeyword" @keyup.enter="hideKeyboard($event)">
</form>
hideKeyboard: function(ev){
  ev.target.blur();
}