Vue子组件修改父组件的值

Vue是不允许子组件直接修改父组件的值的,如果需要修改,按如下方式:

  • 子组件
export default {
  props: {
    visible: Boolean,
  },
  watch: {
    visible(val) {
      this.visibleInline = val;
    },
    visibleInline(val) {
      this.$emit('update:visible', val);
    }
  },
  data() {
    return {
      visibleInline: false,
   }
 }
}
  • 父组件
<template>
    <dialog
      :visible.sync="show"
    >
    </dialog>
</template>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 语法 vm.$emit('update:父组件属性', 值) 在子组件中指定 在父组件中引用子组件时,在要修改的属...
    赛亚人之神阅读 10,443评论 0 1
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,575评论 0 13
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,277评论 0 6
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 835评论 0 2
  • 独坐黄昏谁是伴, 淡茶冷饭 只等檐归燕。 野蜂绿蝇不需乱, 气虚也能把你斩。 夕阳已落天尽暗, 久等不归, 挂灯独...
    云逸1108阅读 54评论 0 0