前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

作者头像
hotqin888
发布2019-04-23 17:17:56
1.8K0
发布2019-04-23 17:17:56
举报
文章被收录于专栏:hotqin888的专栏

场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容。

  1. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到父。
  • vue中路由设置如下:
代码语言:javascript
复制
export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name: '首页'
      },
      component: cmshome,//父组件
      children: [  
        { path: '/', component: cmsindex, name: 'cmsindex' },    
        { path: '/projects', component: projects, name: 'projects' },
        { path: '/project', component: projecthome,name: 'projecthome',//子组件
          children: [
            {path: '/project', component: project, name: 'project'}//孙组件
          ]
        },
      ]
    },
  • 子组件中设置:treeId,因为tree-id就是treeId,这个子组件中的treeId值将会被孙组件中props获取到。
代码语言:javascript
复制
<router-view :tree-id="treeId"></router-view>
  • 孙组件:
代码语言:javascript
复制
props:['treeId'],
  1. 其次是点击tree,孙组件获得了id后,用watch来监视数据变化,当发现treeid变化时,就调用方法来请求服务端,获得表格中的json数据。
代码语言:javascript
复制
      watch: {    // 如果 question 发生改变,这个函数就会运行
        treeId: function (newQuestion) {
          this.projproducts(this.currentPage);
        }
      },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年04月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档