Vue 子组件更改父组件数据

1、callback 回调方法触发更改

父组件：

<Quick @callback="callback" /> 

method: {
  callback(params) { // 逻辑处理}
}

子组件：

changeKey() {
  this.$emit('callback', // 需要传递的参数)
}

2、v-model

父组件：

<Quick v-model="visible" /> 

子组件：

<van-popup v-model="show"></van-popup>

export default {
    model: { // 接收v-model
        prop: 'visible',
        event: 'onChange', // 更改父组件数据事件
    },
    props: {
        visible: { // 接收父组件传递的值
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {
            show: this.visible
        }
    },
    watch: {
        visible: { // 监听父组件传递的值
            handler(n, o) {
                this.show = n // 自定义变量使用 visible
            }
        }
    },
    methods: {
        changeKey() { // 更改父组件传递的值
            this.$emit('onChange', // 传递的值)
        }
   }
}

 

3、.sync

父组件：

<Quick :visible.sync="visible" /> 

子组件：

<van-popup v-model="show"></van-popup>

export default {
    props: {
        visible: { // 接收父组件传递的值
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {
            show: this.visible
        }
    },
    watch: {
        visible: { // 监听父组件传递的值
            handler(n, o) {
                this.show = n // 自定义变量使用 visible
            }
        }
    },
    methods: {
        changeKey() { // 更改父组件传递的值
            this.$emit('update:visible', // 传递的值)
        }
   }
}