首页 >> js开发 >> jsVue将props值实时传递 并可修改的操作js大全
jsVue将props值实时传递 并可修改的操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我们都知道props值是只读的,子组件内不可直接修改,会报错滴但是很多时候这个值是需要子组件主动修改的,一般我们会使用this.$emit()去修改,但比较麻烦下面这种方式可以实现:下面这种方式可以实现:1、父组件实时修改props值时,子组件可以接收到改变2、子组件可主动修改该值
props: [ "value" ],
watch: {
value (v) {
this.RealValue = v
}
},
data () {
return {
RealValue: this.value
}
}
props: [ "value" ],
watch: {
value (v) {
this.RealValue = v
}
},
data () {
return {
RealValue: this.value
}
}
原理很简单,就是使用一个RealValue作为实际显示的参数,并且使用watch实时把value值传给他PS:这里的值是字符串格式,如果value是对象或者数组,watch处要写成:
watch: {
value:{
deep: true,
handler(v) {
this.RealValue = v
}
}
},
watch: {
value:{
deep: true,
handler(v) {
this.RealValue = v
}
}
}, 补充知识:vue组件内数值做watch监听,首次监听不到的问题补充知识:补充知识:vue组件内数值做watch监听,首次监听不到的问题在vue中会使用很多子组件,有时因为组件的类型等原因会导致数据监听不到的情况,下面列举几种问题和解决方法子组件内数据首次监听不到时,可以使用【immediate】方法,其值是true或false;immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
watch:{
uploadImageUrl:{
immediate:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},
watch:{
uploadImageUrl:{
immediate:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},子组件的深度监听函数【deep】,其值是true或false;确认是否深入监听。deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器(受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除)
watch:{
uploadImageUrl:{
deep:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},
watch:{
uploadImageUrl:{
deep:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},给组件内的props为对象的数据设置默认值如果prop中接收的数据为对象或者数组类型,是不可以像字符串等【default:''】直接指定default值的,会报【Invalid default value for prop “defaultProp”: Props with type Object/Array must use a factory function to return the default value.】错误,修正方法如下
defaultProp: {
type: Object,
default: function(){
return {
children: 'children',
label: 'name'
}
}
},
defaultProp: {
type: Object,
default: function(){
return {
children: 'children',
label: 'name'
}
}
},以上这篇Vue将props值实时传递 并可修改的操作就是小编分享给大家的全部内容了,希望能给大家一个参考。
{{RealValue}}
props: [ "value" ],
watch: {
value (v) {
this.RealValue = v
}
},
data () {
return {
RealValue: this.value
}
}
{{RealValue}}
props: [ "value" ],
watch: {
value (v) {
this.RealValue = v
}
},
data () {
return {
RealValue: this.value
}
}
原理很简单,就是使用一个RealValue作为实际显示的参数,并且使用watch实时把value值传给他PS:这里的值是字符串格式,如果value是对象或者数组,watch处要写成:
watch: {
value:{
deep: true,
handler(v) {
this.RealValue = v
}
}
},
watch: {
value:{
deep: true,
handler(v) {
this.RealValue = v
}
}
}, 补充知识:vue组件内数值做watch监听,首次监听不到的问题补充知识:补充知识:vue组件内数值做watch监听,首次监听不到的问题在vue中会使用很多子组件,有时因为组件的类型等原因会导致数据监听不到的情况,下面列举几种问题和解决方法子组件内数据首次监听不到时,可以使用【immediate】方法,其值是true或false;immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
watch:{
uploadImageUrl:{
immediate:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},
watch:{
uploadImageUrl:{
immediate:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},子组件的深度监听函数【deep】,其值是true或false;确认是否深入监听。deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器(受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除)
watch:{
uploadImageUrl:{
deep:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},
watch:{
uploadImageUrl:{
deep:true,
handler:function(newval){
this.uploadShowImageUrl = newval;
}
}
},给组件内的props为对象的数据设置默认值如果prop中接收的数据为对象或者数组类型,是不可以像字符串等【default:''】直接指定default值的,会报【Invalid default value for prop “defaultProp”: Props with type Object/Array must use a factory function to return the default value.】错误,修正方法如下
defaultProp: {
type: Object,
default: function(){
return {
children: 'children',
label: 'name'
}
}
},
defaultProp: {
type: Object,
default: function(){
return {
children: 'children',
label: 'name'
}
}
},以上这篇Vue将props值实时传递 并可修改的操作就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- js解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题js大全
- jsvue 动态添加class,三个以上的条件做判断方式js大全
- jsvue+elementUI中表格高亮或字体颜色改变操作js大全
- jsVue绑定用户接口实现代码示例js大全
- jsVant picker 多级联动操作js大全
- js代码JavaScript语法约定和程序调试原理解析
- jsvue vant中picker组件的使用js大全
- js代码通过实例解析javascript Date对象属性及方法
- jsvue element-ui中table合计指定列求和实例js大全
- js使用vant的地域控件追加全部选项js大全