vue增加数据不更新怎么办-百家乐凯发k8

vue增加数据不更新的解决办法：1、使用“this.$set(target, key, value);”或者“vue.set(target, key, value)”方式新增属性；2、在render函数中动态使用多个slot，并且给slot传值即可。

本教程操作环境：windows10系统、vue 3版、dell g3电脑。

vue增加数据不更新怎么办？

解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)

一、在我们使用vue进行开发的过程中，可能会遇到一种情况：

当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 vue 无法探测普通的新增属性，需要用vue内置的方法

二、vue.set() 响应式新增与修改数据

此时我们需要知道vue.set()需要哪些参数，官方api：https://cn.vuejs.org/v2/api/#vue-set

调用方法：vue.set( target, key, value ) 或者 this.$set(target, key, value);

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值，

调用：this.$set(target, key, value);

补充知识：vue render scopedslots

render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的的使用没有name 。想使用多个slot 的话。需要对slot命名唯一。

在render函数中动态使用多个slot，并且给slot传值

一、我的业务逻辑：

使用了三个组件，

组件a调用组件b，组件b调用组件c，组件c是自己封装的render渲染组件。

组件a希望将自己自定义的插槽插到c组件，c组件渲染出自定义的内容，并且将c组件的值传递给b组件和a组件，b组件是对c组件进行更大一层的封装

a组件调用b组件


     
      {{ field.field.rowdata.name }}

a组件引用b组件，slot-scope接收从b组件中传出来solt的值，slot=“name”,是为插槽具名；

b组件中调用c组件的render函数

b组件span中 slot是动态的值，和a组件中的slot同一个值，才能接受来自a组件自定义的插槽，

field是来自于c组件中传递的值

c组件是render函数

h(
     "td",
     {
      style: { width: field.width   "px" },
      class: { borderright },
      // 作用域插槽格式
      // { name: props => vnode | array }
      scopedslots: this.$scopedslots.name,
      // 如果组件是其他组件的子组件，需为插槽指定名称
      slot: 'name'
     },
     this.$scopedslots.name({
      field: field,
      rowdata: rowdata,
     })
    );

c组件往上传递的值就是 {field：'', rowdata: ''} 的对象