[Vuejs]-How can I access ref value in a different component file?

by

0👍

You can emit event like:

<div @click="$emit('close')">close</div>

end listen to:

<add-countdown-form v-show="showAddCountdownForm === true" 
  @close="showAddCountdownForm = false" />

const { ref } = Vue
const app = Vue.createApp({})
app.component('navi', {
  template: `
  <div class="relative">
    <nav class="w-full top-0 fixed h-20 bg-gray-200 backdrop-blur-xl mb-14">
      <div class="container h-full p-1 flex items-centerm justify-between ">
        <div class="my-auto w-14 h-14 p-1 cursor-pointer relative transition-all " id="addBtn"
          @click="showAddCountdownForm = true">
        toggle
        </div>
      </div>
    </nav>
    <add-countdown-form v-show="showAddCountdownForm === true" 
      @close="showAddCountdownForm = false" />
  </div>
  `,
  setup() {
    const showAddCountdownForm = ref(false);
    return { showAddCountdownForm }
  }
})
app.component('addCountdownForm', {
  template: `
  <div class="h-screen w-full bg-gray-200/50 backdrop-blur-sm relative flex md:justify-center md:items-center">
    <div class="absolute h-1/2 w-full bg-gray-300 bottom-0 md:bottom-auto md:w-1/2">
      <div class="w-full bg-white h-12 ml-0">
        <div @click="$emit('close')">close</div>
      </div>
      <div>Text</div>
    </div>
  </div>
  `,
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <navi></navi>
</div>

Leave a comment