码迷,mamicode.com
首页 > 其他好文 > 详细

路由与组件通讯

时间:2018-05-17 20:41:55      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:router   com   调用   实例   regex   注册   this   vue   -name   

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

1.全局的,

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

2.单个路由独享的

const router = new VueRouter({
  routes: [
    {
      path: ‘/foo‘,
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.组件级的。

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  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:"<div>我是组件{{ count }} <button @click=‘go‘>click</button></div>",
        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引入的子组件自身添加要传递的属性
        
          例如: <my-com1 :yonghu="user"  :dizhi="address" :age="age"></my-com1>

        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通过触发一个事件响应来派发

                import Bus from ‘@/components/common/bus‘;
                <button @click="goToSon2">向son2发送数据</button>
        
                    methods:{
                        goToSon2() {
                         // 派发事件
                          Bus.$emit(‘ok‘,this.msg)
                
                   }
        第五步:在生命周期钩子上监听son1派发过来的事件   $on
        
                 created(){
                        //监听事件
                       Bus.$on(‘ok‘,(v)=>{
                           // console.log(v);
                           this.name=v;
                       })
                    }



路由与组件通讯

标签:router   com   调用   实例   regex   注册   this   vue   -name   

原文地址:https://www.cnblogs.com/zbcry/p/9052923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!