vue-ref

vue父组件获取子组件的ref

有一些需要在父组件里操作子组件的ref，那么怎么在父组件里获取子组件的ref呢

父组件

1
2
// SlidebarMenu 是子组件   父组件的 ref="menu"
<SlidebarMenu class="sliderbar-menu" :menuList="menuList" :activeName="activeName" @onchange="onchange" ref="menu" />

子组件

1
2
// 子组件的 ref="menuitem"
<Menu :active-name="activeName" ref="menuitem" :accordion="true" theme="dark" width="auto" @on-select="changeMenu" :open-names="openname"></Menu>

在父组件的方法里获取子组件的ref
为父组件和子组件设置ref
一级一级的往下找，定位到要处理的子组件，调用相应的组件内置方法

1
2
3
4
5
this.$refs.menu.$refs.menuitem
// eg: 手动更新当前选择的菜单项 需在$nextTick里执行
this.$nextTick(()=>{
  this.$refs.menu.$refs.menuitem.updateActiveName()
})

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true