vue 父组件传子组件数值,父值变更子获取的值没有变的问题

简介: vue 父组件传子组件数值,父值变更子获取的值没有变的问题

1.父组件给子组件传值,子组件使用props接收值。

//父组件
<div>
   <Treeselect  :value="editFormData.customerId" @change="acceptVal($event, 'create')" placeholder="组织" />
</div>
// 子组件
 props: {
    value: {
      default: null
    },
    careful: {
      default: false
    }
  },

问题:

编辑回显时候,editFormData.customerId 是有值的, 在页面上也能正常的显示 1133,但是组织这里就是不回显对应的组织名。

image.png

解决办法:


在子组件内使用 watch 检测数据变动

image.pngimage.png

 


相关文章
|
1天前
|
JavaScript 前端开发
vue3中使用动态组件
vue3中使用动态组件
|
1天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
12 1
|
1天前
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
移动开发 前端开发 JavaScript
VUE3内置组件Transition的学习使用
VUE3内置组件Transition的学习使用
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
987 0
|
2天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
11 0
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口