vue親子コンポーネントの値伝達の2つの方法

1つ目は、methodsメソッドによって制御属性の値を変更することです.
親コンポーネント、コード:

    import child from './child.vue';
    import user from './users.js'; // api  
   
    export default {
        data() {
            return {
                visible: false,
                list: [] //         
            }
        },
        components: {
            child
        },
        methods: {
            getList() {
                //      api    
                user.getList().then( res => {
                    this.visible = true;
                    this.list = res.message;
                })
            }
        }
    }

サブコンポーネント、コードは次のとおりです.

    
    export default {
        data() {
            return {
                dialogVisible: this.value
            }
        },
        props: ['value', 'data'],
        methods: {
            close() {
                this.dialogVisible = false;
                this.$emit('input', this.dialogVisible)
            }
        }
    }

 
2つ目は、watchによって値の変化を監視し、変更することです.
親コンポーネント、コード:

    import child from './child.vue';

    export default {
        data(){
            return {
                visible: false
            }
        },
        components: {
            child
        },
        methods: {
            handleClick() {
                this.visible = true;
            },
            close(val) {
                this.visible = val; 
            }
        }
    }

サブコンポーネント、コードは次のとおりです.

    export default {
        data() {
            return {
                dialogVisible: false
            }
        },
        props: ['visible'],
        watch: {
            visible: {
                handler(newVal,oldVal) {
                    this.dialogVisible = newVal;
                },
                deep: true
            }
        },
        methods: {
            close() {
                this.$emit('close', false)
            }
        }
    }