美文网首页
路由的钩子于组件通讯

路由的钩子于组件通讯

作者: 何海洋_847e | 来源:发表于2018-07-04 14:08 被阅读0次

路由的钩子:(即导航守卫)

1.全局的,

constrouter =newVueRouter({ ... })router.beforeEach((to,from, next) =>{// ...})

2.单个路由独享的

constrouter =newVueRouter({routes: [    {path:'/foo',component: Foo,beforeEnter:(to,from, next) =>{// ...}    }  ]})

3.组件级的。

beforeRouteEnterbeforeRouteUpdate 

(2.2新增)beforeRouteLeaveconstFoo = {template:`...`,  beforeRouteEnter (to,from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建},  beforeRouteUpdate (to,from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},  beforeRouteLeave (to,from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}}

路由元信息:给路由表每项添加的meta

例如:

{name:'find',        path:'/find',        component:find,        meta:{          title:'我是发现组件',        },

5.16组件通讯

组件通讯

一、组件:组件是可复用的 Vue 实例二、创建组件:1.全局组件    Vue.component('my-component-name', {// ... 选项 ...})

例如:

import Vue from'vue';//定义一个全局组件    Vue.component('myCom1',{template:"

我是组件{{ count }} click",        data() {return{count:100}        },methods:{            go() {                console.log('我是组件1的go方法');            }        }    });

2.局部组件      

  var ComponentA = {/* ... */}         

 然后在 components 选项中定义你想要使用的组件:               

 new Vue({el:'#app'components:{'

        component-a': ComponentA,    

      }

三、组件通讯  父传子:

1.创建两个组件A.vue和B.vue,并在A.vue中引入B.vue,并注册

2.在A.vue引入的子组件自身添加要传递的属性              

    例如:

3.在B组件中接收A.vue组件中传递过来的值,通过props接收      

  具体props有两种写法:数组和对象(带验证)        

    例如:        

 export default {

        //props:['yonghu','dizhi','age'],

    props:{

        'yonghu':{type:[String]         

    },

     'dizhi':{

            type:String            

       },

    'age':{

        type:Number,default:0

     }               

 },  

子传父:

主要通过事件派发实现,具体通过$emit实现    

    派发事件:$emit()     

   接收事件:@事件名戒v-on

兄弟之间:(即非父子)

1.Event Bus:通过一个空的vue(即桥梁)实现兄弟之间数据传递    

 第一步:创建两个兄弟组件并引入到其他组件中  例如:son1,son2        

 第二步:创建一个空的vue  例如:bus.js        

 第三步:分别在两个兄弟组件中引入bus.js         

第四步:例如:son1数据发送给son2,在son1通过触发一个事件响应来派发

importBusfrom'@/components/common/bus';向son2发送数据methods:{ goToSon2() {

        // 派发事件

        Bus.$emit('ok',this.msg)

 }

第五步:在生命周期钩子上监听son1派发过来的事件  $on           

             created(){

                //监听事件

                Bus.$on('ok',(v)=>{// console.log(v);this.name=v;            

          })              

      }

相关文章

  • 路由的钩子于组件通讯

    路由的钩子:(即导航守卫) 1.全局的, constrouter =newVueRouter({ ... })ro...

  • VUE路由与通讯

    路由的钩子:(即导航守卫) 1.全局, 2.单个路由独享 3.组件级 例如: 5.16组件通讯 组件通讯一、组件:...

  • vue路由钩子

    路由钩子 1.全局钩子2.某个路由独享钩子3.组件内钩子 全局钩子 beforeEach(全局前置守卫)、afte...

  • 两个新的生命周期钩子

    1.作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态2.具体名字:activated路由组件被激活时触发...

  • [10]路由中的钩子

    资料来源于技术胖的个人网站 我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子...

  • vue生命周期

    触发钩子的完整顺序: 将路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开...

  • 组件传值

    路由的钩子:(即导航守卫) 1.全局的, 2.单个路由独享的 3.组件级的。 例如: ==============...

  • Vue——路由

    路由的钩子:(即导航守卫) 1.全局的, 2.单个路由独享的 3.组件级的。 例如:

  • 路由与组件通讯

    路由的钩子:(即导航守卫) 1.全局的, 2.单个路由独享的 3.组件级的。 beforeRouteEnterbe...

  • iOS 组件化2

    组件化2 本文主要讲组件化之间是如何通讯的 组件化通讯方案 1、URL路由 2、target-action 3、p...

网友评论

      本文标题:路由的钩子于组件通讯

      本文链接:https://www.haomeiwen.com/subject/biqjuftx.html