On gists

Vue parent - child

Popular ⭐ Vue.js

vue1.js Raw #

// https://play.vuejs.org/#eNqdVE2P2jAQ/SsjXwCJBlXtic2itohDK7W72u7Rl5BMwItjW7bDUiH+e8d2krJbRNXlgOyZN1/Pb3Jkn43J9i2yOctdaYXx4NC3ZsGVaIy2Ho5gsZ5C6/ARGyMLjw9YwwlqqxsYUehogH7XVSE7RzaLt5CbAKVWzkMTLCH69lW68Si6RpMbrvJZ6oM6oIvvQHS7LywqD/nawoyut3//Bl++br3XCj6VUpS7W876ypk2qMYTzhZ3dEgN57OEvhpXSu0wBi7D6UJkqNz9b7suEh9EX5+Js+SYDWOxKfOO2KnFJntyWtE7HLkC4KzUjRES7Z3xgtjjbA7RE3yFlPr5W7R52+K0t5dbLHcX7E/uEGyc3Vt0aPfI2eDzhd2gT+7Vzx94oPPgpK5bSegrzgd0WrahxwT70qqK2j7DxW6/RokItXl0q4NH5fqhQqMBeYp4zkgwyyuj/2n3Q/YxxnF1IhYHtQUln6kGYLkVsoJxBEzeJp//VM0/xVKJPezfua1+JrRwIStJo5SFc2SI8KVWxBINukgq6u75jGJfSijuyZXdfbWr/TKmsrSKBBnXhXQ44apuVRk4hzRxoj0hs30hWyR8eDAg0s/Q3cAX4TF1wnNVYS0Urg4m4I+xyjRFw4nKv9x953/J9ITZOSW9FkxRVaSnOby32NzAuih3G6tJfXMwsm3oUxJQDelFqA7U6YXKxNTs9BvEAbCg

// Parent
<script setup>
import { ref, useTemplateRef } from 'vue'
import Modal from './Modal.vue'
const modalRef = useTemplateRef('modal');
</script>

<template>
Parent <br />
=================== <br />
<button @click="modalRef.open()">Open Modal</button>
<button @click="modalRef.close()">Close Modal</button>
<br /><br /><hr />
<Modal ref="modal" />
</template>

// Child - Modal
<template>
  Child (Modal) <br />
=================== <br />
<button @click="open()">Open Modal</button>
<button @click="close()">Close Modal</button>
<div v-show="isOpen" class="ModalContent">Modal Content</div>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
function open() {
  isOpen.value = true 
}
function close() {
  isOpen.value = false 
}

defineExpose({ open, close })
</script>

<style>
  .ModalContent {
    padding: 1rem; background: plum;
    margin: 1rem;
  }
</style>

vue2.js Raw #

// https://play.vuejs.org/#eNqdU99v2jAQ/ldOfimVukTT9kQD2ob6sElbq23ak19McgEXx7ZshzIh/vde7JCStmrVgoS4u++7n5/37Ku12bZFNmWFL520ATyG1s65lo01LsAeHNZwgNqZBs4IejaEfppKqD6Q5dHqchGgNNoHkD76ri1qmHVpJrVQHs+5LvJUjMqQEbCxSgQk60Y41AGKpYOczNnTzxArlm0IRsOXUslyM+NsXC64FjmbRyv6izwRXqfGLom7UMbjM+Sufv+77ntJq9h+aEyFapyQswTJhzHZBQueVlTLVXbrjabl77kG4Kw0jZUK3bUNklbI2RRipIsJpczdj+jrZrs4+ss1lptn/Ld+1/k4u3Ho0W1poiEWhFthSOGrP79wR/+HIM3QKkK/EPyN3qi26zHBvrW6orZPcLHb71EnUq/++qtdQO2PQ8XjEPIQ8ZyRahYvjP7Q7qfsc+RxfaAtDpLr5HuiIoDFWqoKJhFw/j45xVP+E6rFt6ppxHxFTJXckmz82tyNiCSaUgnvyRkpC6Npf7SCeVJabxc58cfiii/q0VPuvulJjlqrsJYaKSGqyZNH6cN/lXaZnXZwPIoVVUWHncJHh80lLEW5WTlDMpiCVW1zmVANHU7qHtQfjsrE1OxwD8Nqg7E=

// v-model
// parent
<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'
const isModalOpen = ref(false)
</script>

<template>
Parent <br />
=================== <br />
<button @click="isModalOpen = true">Open Modal</button>
<button @click="isModalOpen = false">Close Modal</button>
<br /><br /><hr />
<Modal v-model="isModalOpen" />
</template>

// Child modal
<template>
  Child (Modal) <br />
=================== <br />
<button @click="modelValue = true">Open Modal</button>
<button @click="modelValue = false">Close Modal</button>
<div v-show="modelValue" class="ModalContent">Modal Content</div>
</template>

<script setup>


const modelValue = defineModel()
</script>

<style>
  .ModalContent {
    padding: 1rem; background: plum;
    margin: 1rem;
  }
</style>

vue3.js Raw #

// props-emits

// Parent
<Modal :open="isModalOpen" @close="isModalOpen = false" />

// Modal  
defineProps(['open'])
defineEmits(['close'])

vue4.js Raw #

// composables

// useModal.js
export function useModal() {
  const isOpen = ref(false)
  return { isOpen, open: () => isOpen.value = true, close: () => isOpen.value = false }
}

// Parent i Modal používají stejný composable

vue5.js Raw #

// provide,inject - deep passing

// Parent
provide('modal', { open, close })

// Modal
const { open, close } = inject('modal')