Vue项目中props传值时子组件检测不到的问题及解决

目录
  • props传值时子组件检测不到
  • props用法和传值问题
    • 基本用法
    • props的使用
    • 单向数据流：props是单向绑定的
    • 总结一下props传值的注意点

props传值时子组件检测不到

我们在Vue项目开发的过程中，经常会需要在父子组件传值，我们都知道，父子组件传值的时候是通过 props 来进行的，但是在父组件的数据动态改变的时候，子组件却接收不到最新变化的数据，这个时候怎么办呢？

首先，传值不能用驼峰命名法，因为vue语法中规定HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，我们需要使用短线分隔符，例如：good-id 这样。

然后，我们可以将数据的改变用JSON.parse(JSON.stringify(data))进行转化，但是官网上又更加直接的方法，那就是对于props接收过来的数据用watch进行监听，并且，如果你想初始化的时候就进行监听，可以给监听的属性上加一个 immediate:true

例如：

props: {
    personalname: {
      type: String
    }
  },
watch: {
    personalname(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.fetch(); //这里里面放你代码的逻辑
      }
    }，
    mmediate: true，
  },

当然，你如果想深层次的监听(如：对象，，数组等引用类型值时)可以在加一个 deep:true

ok，快去试试吧！

props用法和传值问题

props的基本用法是父组件给子组件传输数据和验证

基本用法

1.在父组件中的data中定义值

2.在子组件中使用props声明要引用哪个值

3.父组件的template中要在子组件标签上绑定

4.在template模板中，要使用中划线写法；在script脚本中使用小驼峰

props的使用

1.静态props

静态即传入的值不变化，直接在父组件中定义，子组件中使用

2.动态props

动态即传入的值会变化，父组件中要动态地绑定父组件的数据。

3.props验证

验证传入的props参数的数据规格，如果不符合数据规格则发出警告，注意这个数据类型包含所有的数据类型，如基本类型和引用类型;

还可以在验证中加入自定义验证函数，当返回false时则发出警告

单向数据流：props是单向绑定的

一般来说，当父组件的属性变化时，将传导给子组件，但是反过来不会。每次父组件更新时，子组件的所有 prop 都会更新为最新值。

但是，这只是限于静态或者动态时子组件中没有定义局部变量去接收的情况，如果说子组件中定义了局部变量去接收，那么父组件中的值更新时子组件是接收不到的，即子组件只能接收初始值（不管是在data中定义还是computed计算属性定义）

第二点，但是基本数据类型时，子组件接收了父组件中的数据再进行修改，父组件中的数据是不受影响的，也就是props的单向数据流；但是如果是对象数组这种引用类型数据的话，子组件中修改，父组件也会跟着变化的（当然，父组件中修改子组件也会变化），原因就是它们共用一个内存地址，相当于浅拷贝！

解决方案：在子组件中对数据进行局部变量接收后再进行深拷贝！！然后用拷贝完后的数据！ 看下面，一变全变

总结一下props传值的注意点

1.若是子组件定义局部变量去接收，则不接受父组件数据更新，即只能接收初始值

2.基本数据类型修改，子组件不会影响父组件，但是若是引用数据类型数组对象的话，两者相互影响，共用同一个内存地址，相当于浅拷贝

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中props用法介绍

    Vue中props用法介绍

    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • vue3父子组件传值中props使用细节浅析

    目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p

  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    目录 props传值时子组件检测不到 props用法和传值问题 基本用法 props的使用 单向数据流:props是单向绑定的 总结一下props传值的注意点 props传值时子组件检测不到 我们在Vue项目开发的过程中,经常会需要在父子组件传值,我们都知道,父子组件传值的时候是通过 props 来进行的,但是在父组件的数据动态改变的时候,子组件却接收不到最新变化的数据,这个时候怎么办呢? 首先,传值不能用驼峰命名法,因为vue语法中规定HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大

  • vue项目中使用require.context引入组件

    vue项目中使用require.context引入组件

    目录 背景 require.context 是什么? require.context 的基本用法 require.content 的应用场景 背景 我们在vue项目中,我们可能或有很多的组件需要全局注册,大家有没有遇到这样的烦恼,组件太多,需要一个一个引入注册呢? require.context 是什么? require.context 是webpack的api,我们可以通过require.context()函数来创建自己的context. require.context 的基本用法 语法如下

  • 详解Vue 项目中的几个实用组件（ts）

    前言 这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用.如果还没有使用过 ts 的同学可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList这边文章开始你的 ts 之旅,后续代码也是在 todoList 的结构上改进的 vue 路由中的懒加载 你真的用好了路由的懒加载吗? 在 2.x 的

  • vue如何通过props方式在子组件中获取相应的对象

    vue如何通过props方式在子组件中获取相应的对象

    目录 方法一 所以就可以直接拿取 方法二 有时候会获取不到,可以用一个定时器来获取 方法三 深拷贝 方法四 利用watch监听 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误. 子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去. 我就直接从代码上面来进行 js代码: //子组件中,定义传入的变量的类型等 props: { data: { type: Array, r

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • vue项目中实现图片预览的公用组件功能

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • vue项目中公用footer组件底部位置的适配问题

    需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部:窗口高度的变化时,footer的位置需要重新调整. 可能有的伙伴首先想到的 position: fixed; bottom: 0; 这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况. 我最终的解决方案: 给内容不足以撑满浏

随机推荐