For the first time use VUe3 to write the parent and child component to pass the value.

The first code is as follows (child to parent)

The parent component is named first-Page

<template> <div> <one-dialog :show-dialog="state.showDialog" @updateDialog="updateDialog" /> </div> </template> <script setup> import { reactive } from 'vue'; // Import OneDialog from '.. /.. /componets/one-dialog.vue'; const state = reactive({ showDialog: false }); const updateDialog = showDialog => { console.log(555, showDialog); state.showDialog = showDialog; }; </script> <style scoped> </style>Copy the code

The child component is named One-Dialog

<template> <div class="first-content"> <div class="first-content__dialog" @click="showClick" v-show="props.showDialog" class="dialog"> <div class="dialog__icon clearfix"> <img class="dialog__icon__close" src=".. PNG "@click="closeDialog" /> </div> <div class="dialog__content"> this is the contents of the popup </div> </div> </div> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps({ showDialog: { type: Boolean, default: false } }); const emit = defineEmits(['updateDialog']); const showClick = () => { emit('updateDialog', true); }; const closeDialog = () => { console.log(999); emit('updateDialog', false); }; </script> <style scoped> .first-content__dialog { cursor: pointer; } .dialog { position: fixed; font-size: 24px; height: 360px; width: 260px; background-color: rgb(9, 66, 170); border-radius: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; } .clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .dialog__icon__close { cursor: pointer; float: right; } .dialog__content { text-align: center; } </style>Copy the code

The second method uses the.sync modifier, but vue3 no longer supports this syntax, instead v-model syntax, and supports multiple V-Models. For details, please refer to the official documentation of vue3

Code: parent component code

<template> <div> <div class="first-content__dialog" @click="showClick"> </div> <one-dialog v-model:showDialog="state.showDialog" /> </div> </template> <script setup> import { reactive } from 'vue'; // Import OneDialog from '.. /.. /componets/one-dialog.vue'; const state = reactive({ showDialog: false }); const showClick = () => { state.showDialog = true; }; </script> <style scoped> .first-content__dialog { cursor: pointer; } </style>Copy the code

Sub-component code:

<template> <div class="first-content"> <! <div class=" props. ShowDialog "class="dialog"> <div v-show="props.  <div class="dialog__icon clearfix"> <img class="dialog__icon__close" src=".. PNG "@click="closeDialog" /> </div> <div class="dialog__content"> this is the contents of the popup </div> </div> </div> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps({ showDialog: { type: Boolean, default: false } }); const emit = defineEmits(['update:showDialog']); const closeDialog = () => { console.log(999); emit('update:showDialog', false); }; </script> <style scoped> .first-content__dialog { cursor: pointer; } .dialog { position: fixed; font-size: 24px; height: 360px; width: 260px; background-color: rgb(9, 66, 170); border-radius: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; } .clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .dialog__icon__close { cursor: pointer; float: right; } .dialog__content { text-align: center; } </style>Copy the code

The third way is to see the official documentation can be removed modifier, that is to remove the kangkang parent component code:

<template> <div> <div class="first-content__dialog" @click="showClick"> </div> <one-dialog v-model="state.showDialog" /> </div> </template> <script setup> import { reactive } from 'vue'; // Import OneDialog from '.. /.. /componets/one-dialog.vue'; const state = reactive({ showDialog: false }); const showClick = () => { state.showDialog = true; }; </script> <style scoped> .first-content__dialog { cursor: pointer; } </style>Copy the code

Sub-component code:

<template> <div class="first-content"> <! <div class=" props. ModelValue "class="dialog"> <img class="dialog__icon__close" SRC ="... PNG "@click="closeDialog" /> </div> <div class="dialog__content"> this is the contents of the popup </div> </div> </div> </template> <script setup> // import { reactive } from 'vue'; import { defineProps, defineEmits } from 'vue'; Const props = defineProps({modelValue: {// props must be called type: Boolean, default: false}}); const emit = defineEmits(['update:modelValue']); Const closeDialog = () => {console.log(999); emit('update:modelValue', false); // The same name as emit, also called modelValue}; </script> <style scoped> .first-content__dialog { cursor: pointer; } .dialog { position: fixed; font-size: 24px; height: 360px; width: 260px; background-color: rgb(9, 66, 170); border-radius: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; } .clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .dialog__icon__close { cursor: pointer; float: right; } .dialog__content { text-align: center; } </style>Copy the code

Note that vue3 syntax can use multiple V-models, also can omit modifier drops, but must be called modelValue, specific can refer to vue3 official website