Vue technique [.sync continues to pass] Component event passing

Scenario: As page lines get longer, components have to be pulled out. When the

popover is pulled away, this happens :visible.sync is not working properly. Error cannot modify parent properties when used within a component

knowledge

• Vue · Custom event · sync modifier
• Element · Dialog supports Sync

The solution

Sync listens for update:visible, so the

component is still bound to the parent property isVisible, plus the close event handling and passing the update

// Remove the component action-dialog
<template>
    <el-dialog :visible="isVisible" @close="closeHandle">
    </el-dialog>
</template>
<script>
export default {
    props: {
       isVisible: {
           type: Boolean.required: true}},methods: {
        closeHandle(){
            this.$emit('update:isVisible'.false)}}}</script>
Copy the code

/ / page
<template>
    <div class="page-container">
    // ...
    <action-dialog :isVisible.sync="actionDialog">
    </div>
</template>
<script>
export default {
    data() {
        return {
            actionDialog: false}}}</script>
Copy the code