Why aren't there props for child -> parent and $emits for parent -> child?-CodePudding

I have a page with a component and the page needs to access a variable in that component. Would be nice if it were reactive. Then from the page I need to activate a function in the component. Would be nice if it could be done without a reactive variable. My question is 1: what's the best way to activate the function from the parent, for example when I click a button and 2: it seems very unintuitive and random to me that they aren't both possible in both directions? Anyone maybe know how Vue suggest you do it? This whole thing seems so complex relative to the relatively simple thing I'm trying to do.

I guess I try to use props? Or are refs a better option here?

CodePudding user response：

So in general: you use refs, if you need the dom element, that's the whole purpose of refs. Since you don't mention that you n ed the dom element, you don't need to use that here.

There are 3 ways of communication: parent to child via props: https://vuejs.org/guide/components/props.html

child to parent via events https://vuejs.org/guide/components/events.html

and anyone to anyone via event bus, which need an extra lib in vue3 and is out of scope for your question https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus

If you want to execute a function in the component whenever the value changes, you can put a watcher on the prop. The other way around, from child to parent, you just create a listener to your emitted event and invoke a function of your choice. There are good examples in the docs in my opinion.

CodePudding user response：

As per my understanding, You want to trigger the child component method from the Parent component without passing any prop as a input parameter and in same way you want to access child component data in the parent component without $emit. If Yes, You can simply achieve this using $refs.

You can attach the ref to the child component and then access it's variables and methods with the help of this $refs.

Live Demo (Just for a demo purpose I am using Vue 2, You can make the changes as per Vue 3) :

Vue.component('child', {
  data: {
    childVar: ''
  },
  methods: {
    triggerEventInChildFromParent() {
      console.log('Child Function triggered from Parent');
    }
  },
  mounted() {
    this.childVar = 'Child component variable'
  }
});

var app = new Vue({
  el: '#app',
  methods: {
    triggerEventInChild() {
      this.$refs.child.triggerEventInChildFromParent()
    }
  },
  mounted() {
    console.log(this.$refs.child.childVar)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="triggerEventInChild">
    Button in Parent
  </button>
  <child ref="child"></child>
</div>