vue 2.0 关于 子组件修改父组件 prop

vue组件通讯(父子)

父组件通过v-bind的形式 向子组件中传递相应的 参数或自定义的属性

<tenantNewForm :submitLoading='submitLoading' ref='formData' 
style="padding-left: 2px" :table-height="iHeight -40" 
:select-org-id="selectOrgId" :formData='newFormData' 
@submit="submit" :editBtn.sync="editBtn"/>

子组件 props 接收响应的参数,也可自定义参数内置,可以直接使用无需注册

props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    roleList: {
      type: Array,
      default: () => {
        return []
      }
    },
    submitLoading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    editBtn:{
      type: Boolean,
      default:false
    }
  },
  1. 当我们使用子组件通过 v-model绑定时,是否可以直接修改 props的值?会用什么影响
    prorps接收到数据相当子组件的data里面的状态变量 可以直接进行修改;父组件的相应的值也会改变
//子组件
<el-form ref="formData" :model="formData" label-width="100px">
      <el-form-item
        label="上级栏目:"
        prop="news_groups_parent_name"
      >
        <el-input v-model="formData.news_groups_parent_name" type="text" disabled readonly/>
      </el-form-item>
  </el-form>
//父组件
可以直接用 newFormData  获取到表单修改的 值

当我用普通的属性绑定的形式 发现当修改prorp的 只是子组件里的改变了 父组件没有改变,
2. 当我们使用普通属性绑定时 能否在子组件修改父组件的传递的值 父组件里面也跟着改变?
首先props的数据 是单向数据流, 我们就需在根源解决问题 直接修改父组件的值
(1)可以子向父通讯的方式 父组件监听 进行修改
(2)this.$emit('update:prorps值',修改的data)=》this.$emit('update:editBtn',false) 当使用这个是 父组件传递的参数后面要加.sync
(3)vuex
(4)refs
...方法有点多,根据实际业务需求来,个人还是比较喜欢(2)简单直接; 有兴趣的 可以研究研究

posted @ 2021-06-19 12:05  xiao旭  阅读(512)  评论(0编辑  收藏  举报