1

From my parent component I use a router-view to render the child views, in vue 2 use $this.refs.child... it served to access the data and functions of my view, but in Vue 3 not, how can I access this data?

In the official documentation it says that the ref can be used as follows

<script>
   export default {
      setup()
      {
          const timeLine   = ref({});
          const routerView = ref(null);

          onMounted(() =>
          {
              console.log(routerView.value.timeLine)
          });


          return { timeLine, routerView }
      }
   }
</script>

And my router-view is declared like this

<router-view 
        ref="routerView"
        class="scroll scroll-design scroll-big"
>
</router-view>

But this way it doesn't work, I don't access the timeLine property of my child component, which I have declared as follows

const timeLine = reactive(
{
    show: true,
    title: 'generals.evangelize',
    back: 'mainHome',
    width: '16.66'
});

How can I get this data from the parent component?

Edwin Aquino
  • 201
  • 2
  • 16
  • I think this should do the trick: (just remove the null) const routerView = ref(); – digitalniweb Dec 27 '21 at 15:00
  • No, also when accessing `timeLine` it returns `undefined`, and if I do a `console.log (routerView.value)`, it returns a vue object in which I cannot find any instance declared in my child component – Edwin Aquino Dec 27 '21 at 15:05
  • did you return the value in the child component? – digitalniweb Dec 27 '21 at 15:13
  • 1
    This might be helpful: https://stackoverflow.com/questions/67053956/vue-3-get-access-to-router-view-instance-in-order-to-call-child-methods – match Dec 27 '21 at 15:19
  • @match Thank you very much, that publication had the solution I needed – Edwin Aquino Dec 27 '21 at 15:28
  • @match There is a problem with the answer you commented, it is capturing the data of the current view, but not of the new one that is changing – Edwin Aquino Dec 27 '21 at 16:43

0 Answers0