On gists

10 communication parent -> child, siblings

cdruc vue

ParentChild.vue Raw #

<script setup>
import ShoppingCart from "./ShoppingCart.vue";
import {ref} from "vue";
 
const isOpened = ref(false);
</script>
 
<template>
  <button @click="isOpened = true">Open cart</button>
  <ShoppingCart :is-opened="isOpened" @toggle="(value) => isOpened = value"/>
</template>

Siblings.vue Raw #

// store
import {ref} from "vue";

export const cart = ref({
  isOpened: false,
  setIsOpened(value) {
    this.isOpened = value;
  }
});



// Usage
<script setup>
import {cart} from "../stores/cart.js"
</script>
 
<template>
  <div class="p-4 flex justify-end bg-gray-100">
    <button @click="cart.setIsOpened(true)">Open cart</button>
  </div>
</template>

cart.js Raw #

import {ref} from "vue";
 
export const cart = ref({
  isOpened: false,
  setIsOpened(value) {
    this.isOpened = value;
  }
});