Changes in vuE3’s custom component bidirectional binding syntax make it written differently than VUe2. Let’s take the example of the Dialog component of Element-Plus. Based on it. Encapsulate a dialog box of its own, and introduce two implementation ideas:

Idea 1: Data-driven:

We wrap a test-dialog component:

<el-button @click="open"> open < / el - button ><test-dialog  ref="testDom"  v-model:visible="flag" ></test-dialog>

import TestDialog from "@/components/Dialogs/TestDialog"

import { reactive, toRefs, ref, onMounted, watch } from "vue"

setup() {undefined

const state = reactive({

      flag: false

    })

 const open = () = > {

      state.flag = true

    }

 watch(() = > state.flag, (val) = > {

      console.log("Parent component listening flag:", val)

    })

}
Copy the code
Child component (popover component) : <template><el-dialog

    title="Tip"

    v-model="dialogVisble"

    width="30%"

    :before-close="close"

  >

    <span>This is a piece of information</span>

    <template #footer>

      <span class="dialog-footer">

        <el-button @click="close">Take away</el-button>

        <el-button

          type="primary"

          @click="close"

        >determine</el-button>

      </span>

    </template>

  </el-dialog>

</template>

<script>

import { ref, watch } from "vue"

export default {undefined

  name: "TestDialog".components: {},

  props: {undefined

    visible: {

      type: Boolean.default: false}},setup(props, ctx) {

    const dialogVisble = ref(false)

    const close = () = > {undefined

      ctx.emit("update:visible".false)

    }

    watch(() = > dialogVisble.value, (val) = > {

      ctx.emit("update:visible", val)

    })

    watch(() = > props.visible, (val) = > {

      dialogVisble.value = val

    })

    return{ dialogVisble, open, close }; }};</script>

<style scoped>

</style>

` `

Copy the code

Second idea:

Similar to manipulating the DOM directly, we first get a reference to the test-Dialog component through ref, and each time we click the open button, we directly manipulate its internal variables through the child component to show and hide them

The parent page: <el-button @click="openByParentMethod "> open </el-button> <test-dialog ref="testDom" V-model :visible="flag" ></test-dialog> import TestDialog from "@/components/Dialogs/TestDialog" setup() { const testDom = ref(null) const openByParentMethod = () => { testDom.value.dialogVisble = true } const closeByParentMethod= () => { TestDom. Value. DialogVisble = false} return {testDom openByParentMethod, closeByParentMethod,}}Copy the code
<template> <el-dialog title=" prompt "v-model="dialogVisble" width="30%" :before-close="close" > <span> <template #footer> <span class="dialog-footer"> <el-button @click="close"> <el-button type="primary" </el-button> </span> </template> </el-dialog> </template> setup(props,) ctx) { const dialogVisble = ref(false) const open = () => { dialogVisble.value = true } const close = () => { dialogVisble.value = false } return { dialogVisble, open, close }; },Copy the code
Copy the code