zl程序教程

您现在的位置是:首页 >  前端

当前栏目

weex-使用Vue.set设置属性和使用this.xxx设置属性的区别

Vue属性set 设置 区别 this xxx weex
2023-09-11 14:21:22 时间

在使用weex过程中,免不了要自定义组件,或者说封装子控件,这时候需要把父组件的一些值传递到子控件中并作出相应的操作,这时候就要使用props来进行传值,但是在赋值的时候,具体通过Vue.set来修改属性还是通过this.xxxx来修改是一个问题,不熟悉的人很容易被困扰到,下面博主将详细讲解下这两种赋值的使用方法和条件:
1.Vue.set
此处饮用vue官网的说法
此截图来自于vue官网,从这里可以看到vue.set的使用方法和参数特质,限制比较严格,之所以用vue.set是为了避开vue不能检测属性被添加的限制,简而言之就是,vue本身不能动态添加属性,添加一个不存在的属性,但是通过vue.set你可以这么干,这三个参数分别代表:

json对象(字典)/数组-------键值/数组中的index-------你要设置的新值

一定要注意,target只能是两种格式,一种是字典,或者说json对象,另一种是数组,切记!!!

2.this.xxx
什么情况下用到这个呢?这也是用来改变属性的一种设置方法它和Vue.set的区别是:
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上,这里this.xxxxx是针对没有嵌套的对象 所以不用vue.set反而更好,否则你的对象会被强制转为数组类型,博主已经体验过了,很不方便。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上,这里this.content没有嵌套了 所以不用vue.set也可以的,或者说不用反而更好。



华丽丽的分割线
在此总结,如果传递的类型是string,Nsnumber,布尔,这样的类型是没有嵌套的,没有层级,只是一个变量,那就直接用this.xxxx来设置值,否则就需要上面的Vue.set来设置了。

博主下一篇博客,将会详细讲解怎么来设置属性,用实例给大家讲述,一步步教你学会自定义控件,并传值。