精华内容
下载资源
问答
  • vue问题记录- 3.在子组件中修改props中变量的问题
    千次阅读
    2020-06-23 12:47:26
    • 案发现场:
      ​ 在子组件中,props中的变量值在子组件中不能被修改,只能由父组件传值。如果子组件中需要某个变量来自于父组件,并且子组件也可修改,可以采用如下方式:listItem用来接收父组件传递的值并赋值给list。在子组件中通过访问list的值或者修改list的值来实现。

    • 解决方案:
      (1)在props中创建一个变量,值来自于父组件。

    props: {
    		listItem: {
    			type: Object,
    			// default:'',
    			requeired: true
    		}
    }
    

    (2)创建一个data域的变量:值来自于props中的listItem。

    data: function() {
    			return {
    				list:this.listItem,
    			}
    		}
    

    (3)监听props中listItem的变化,值发生改变时,修改data域中的list。随时获取父组件传递的值

    	watch:{
    			listItem:function(newList){
    				this.list = newList;
    			}
    		}
    

    (4)当需要修改父组件传递的值时,就可以通过修改data中的list值来实现,并访问list中的数据。不用修改listItem的值。

    更多相关内容
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue不推荐直接在子组件中修改父组件传来的props,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or...
  • vue 子组件修改props中

    千次阅读 2020-07-31 09:03:01
    问题:子组件修改父组件传来的props中)。普通的修改会报错,因为这个是单向的,只能传进来,要是想修改就要用v-model 解决办法:用v-model 写个简单粗暴例子: 父组件 <control :lingthData=...

    问题:子组件想修改父组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model

    解决办法:用v-model

    写个简单粗暴例子:

    父组件

     <control :lingthData="lingthData" v-model="deviceF"></control>
     
     //v-model里面写上我们要传给子组件,并且还会在子组件中改变这个值
     
    import control from '@/page/map/control'
    export default {
      components: {
        control
      },
      data () {
        return {
          deviceF: true
        }
      }
    

    子组件

    <template>
        <div>
            {{device}}
            <div @click="look">改变值</div>
        </div>
    </template>
    <script>
    export default {
      data () {
        return {
          device: this.value,  //定义一下
        }
      },
      props: ['lingthData', 'value'],//因为想要改变device,所以device要写成value,这里是写死的
      components: {
      },
      methods: {
        look () {
          this.device = !this.device
          this.$emit('input', this.device)  //这样this.device就会被修改;前面的input是固定写死的
        }
      }
    }
    </script>
    

    具体为什么这么写,vue文档里有交待=》

    https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model

    展开全文
  • 另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台发出警告。 Vue3 Props 文档 尝试通过下面的...

    理论

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

    另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

    Vue3 Props 文档

    尝试通过下面的方法直接修改属性值

    this.$props.modelValue = true;
    

    Vue 将提出警告

    Set operation on key “modelValue” failed: target is readonly.

    且修改该属性值并不能修改父组件对应的变量,仅仅适用于基础数据类型。

    注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态,且 Vue 无法为此向你发出警告。作为一个通用规则,应该避免修改任何 prop,包括对象和数组,因为这种做法无视了单向数据绑定,且可能会导致意料之外的结果。

    Vue3 Props 文档

    正确的修改方法是触发子组件事件,父组件监听该事件并执行修改父组件的函数,以 v-model 为例,v-model 本身就是传递给子组件的 modelValue 属性,然后监听 update:modelValue 事件来做到双向数据绑定,所以我们也可以通过该方法来在代码中修改 modelValue

    this.$emit("update:modelValue", !this.$props.modelValue);
    

    v-model 将自动监听 update:modelValue 事件并将 modelValue 修改为触发事件时传递的参数值(即 $emit 的第二个参数)。

    需要注意的是,这种通过触发事件-监听事件的数据流模式并不能马上生效,如果使用以下代码

    this.$emit("update:modelValue", !this.$props.modelValue);
    console.log(this.$props.modelValue);
    

    会发现输出到控制台的仍然是 modelValue 原先的值,这是因为触发事件-监听事件的模式下属性值的修改需要时间,改用以下代码会发现输出正常:

    this.$emit("update:modelValue", !this.$props.modelValue);
    setTimeout(()=> {console.log(this.$props.modelValue)}, 1000)
    

    实践

    由于 Vant 只实现了左边放 label 的输入框,想基于此实现一个 label 在右边的输入框

    Vant3 Field 文档

    这其中遇到的问题除了把 label 右置并根据 label 的内容自适应宽度外,就是 Vant 中的 <van-field /> 与我需要实现的 <right-label-input /> 以及放置 <right-label-input> 的父组件之间的数据流了。

    错误做法

    为了能够与 <van-field /> 一致使用 v-model ,我在 <right-label-input /> 下设置 modelValue 属性,然后将 <van-field>v-model="modelValue"

    <template>
    <van-field :placeholder="placeholder" :name="name" v-model="modelValue" :disabled="disabled"/>
    </template>
    
    <script>
    export default {
        name: "RightLabelInput",
        props: {
            modelValue: "",
        },
    }
    </script>
    

    无疑,这种做法违背了单向数据流原则,在 VanField 修改时将直接影响 RightLabelInputmodelValue 值,而 modelValueRightLabelInput 的属性,不能直接修改。

    可能正确的做法

    <template>
        <van-field :placeholder="placeholder"
                   :name="name"
                   v-model="input"
    
                   :disabled="disabled"
        />
    </template>
    
    <script>
    export default {
        name: "RightLabelInput",
        props: {
            placeholder: "",
            name: "",
            label: "",
            modelValue: "",
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                input: this.modelValue, // 绑定到 data 的变量,防止直接修改 Props
            }
        },
        beforeMount() {
            this.input = this.modelValue
        },
        watch: {
            input(newInput, oldInput) {
                this.$emit("update:modelValue", newInput); // 监听 input 在修改时发起事件,由父组件修改 modelValue 的值
            },
            modelValue(newValue, oldValue) {
                this.input = newValue;
            }
        }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    关键词:单向数据流

    展开全文
  • vue 子组件修改props方法

    千次阅读 2021-03-07 19:58:18
    vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件修改props,这里介绍三种可以修改子组件props的方法。 1.父组件用sync修饰,...

    vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件有修改props,这里介绍三种可以修改子组件props的方法。

    1.父组件用sync修饰,子组件通过$emit('update:参数',值)函数去修改。在项目中通常可以用改方法关闭弹框。

    <template>
    	//父组件
       <CommonDialog
         :title="dialogTitle"
         :showDialog.sync="isShowDialog"
         :footer="true"
         :width="dialogWidth"
       >
      	....
       </CommonDialog>
    </template>
    
    //子组件 弹框是否打开props: showDialog
    <el-dialog :title="title" :visible="showDialog" :show-close="false" :width="width">
          <i class="el-dialog__headerbtn" @click="closeModal">
            <span class="iconfont iconclose"></span>
          </i>
          <div class="dialog-body">
              <slot></slot>
          </div>
          <div v-if="!footer" slot="footer" class="dialog-footer">
            <slot name="footer"></slot>
          </div>
        </el-dialog>
    
    //关闭弹框------子组件修改props
     closeModal() {
       this.$emit("update:showDialog", false);
     },
    

    2.如果props是对象,在子组件中修改props

    <template>
      <div class="csd-select">
        <el-popover
          placement="bottom"
          :width="width"
          :trigger="config.trigger"
          :config="config"
          transition="fade-in"
          popper-class="casade-selector"
          v-model="options_show"
        >
    	...
        </el-popover>
      </div>
    </template>
    <script>
    export default {
      name: "CasadeSelector",
      props: {
        config: {
          type: Object,
          //让props默认返回
          default() {
            return {};
          }
        },
      },
    </script>
    

    3.props是双向绑定的

    <template>
        <control v-model="deviceF"></control>
    </template>
    
     //v-model里面写上我们要传给子组件,并且还会在子组件中改变这个值
     <script>
     import control from '@/components/control'
     export default {
        name:"test",
        components: {
            control
        },
        data () {
            return {
            deviceF: true,
            }
        }
    }
     </script>
    
    <template>
       <div>
           {{device}}
           <button @click="look">改变值</button>
       </div>
    </template>
    <script>
    export default {
     data () {
       return {
         device: this.value,  //定义一下
       }
     },
     props: ['value'],//因为想要改变device,所以device要写成value,这里是写死的
     components: {
     },
     methods: {
       look () {
         this.device = !this.device
         this.$emit('input', this.device)  //这样this.device就会被修改;前面的input是固定写死的
       }
     }
    }
    </script>
    
    展开全文
  • vue 父组件给子组件的prop传值报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the ...
  • 需求:父组件通过props传递给...所以子组件需要想办法修改 props 的一个属性。 一、使用计算属性 在 computed 获取到 props,并通过 map 遍历数组来修改属性。 // 子组件 <template> <ul> <li
  • vue子组件直接修改props

    千次阅读 2021-04-09 16:41:57
    子组件: <script> export default { props: { num: { type: Number, default: 1 } }, methods: { addNum() { this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式 } } } </scrip
  • 在Vue,如果父组件给子组件传的是数组或者对象这些引用类型,那么子组件可以通过props属性与父组件同步数据。 var vm = new Vue({ el: '#app', data: { // caseInfo zhifarenyuan: {}, // 执法人员 weifainfo...
  • 1.父组件修改传值 if (res.code === 10000) { this.setState({ OPT_ROLE_CODE: res.data.rows[0].role }) }   <OperatorsInfoTab OPT_ROLE_CODE={this.state.OPT...
  • 报错提示: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or ...将props接收过来的先在data里存起来,在v-model里绑定
  • Vue崇尚单向数据流,本来不应该直接修改的,.sync这个黑科技可以直接改 <navBar :names.sync="names"> </navBar> //编译时会被扩展为 <navBar :names="names" @update:names="val => names =...
  • 赋值为一个新的,当监听到变化时,同时将消息告诉父组件
  • 前言 最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用...父组件用v-mode将数据绑定到子组件上 <ChildComponent v-model:test="test" /> 其实它是以下
  • 通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子 // 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `...
  • 首先列举平常使用Vue 父组件传递数据到子组件的几种情况 传递的是基础数据类型(Number,Boolean,String) 传递的是引用类型(Object,Array) 针对以上几种情况再逐一进行分析 当prop的类型为基础数据类型时 ...
  • 父组件通过props传值给子组件,如何避免子组件改变props的属性报错问题 报错信息:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, ...
  • 最近项目需要,从父组件传值到子组件子组件通过props获取父组件传过来的 在父组件定义要传值的属性: //父组件定义要传的属性 :title="title" <dopic :item="item" v-for="(item, index) in DopicList" :...
  • 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props传过来的呢?思路是通过子组件$emit发射一个方法 如下: this.$emit('imgDataCallback', callbackUrl); 在父组件使用子组件的...
  • vue2.0子组件中不能修改父组件的状态,否则在控制台会报错。 比如,父组件传给子组件...如果props是对象的话,在子组件修改props的话,父组件是不会报错的,父组件的也会跟着改变 父组件传递给子组件一...
  • 因为父子传值的用props传值的时候,子组件不能随意修改父组件的,因此需要用到 this.$emit(‘update:父组件传给子组件的键’,修改) 这个方式去修改 父组件: <indexlist :item="item" :index="index" :...
  • vue2.0 子组件改变props值,并向父组件传值为什么我们会有修改 prop 数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用; prop 作为初始值传入,由子组件处理成其它数据输出...
  • 理论上vue是单向数据流,只能父组件传值给子组件子组件要想改变父组件的,必须通过emit一个事件,在父组件中修改。 但是有时候却出现,子组件可以直接改变父组件里面的,这是怎么一回事?难道vue不是单向数据流...
  • prop 的来定义一个计算属性: props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } 注意 在 JavaScript 对象和数组是通过引用传入的,所以对于一个数组或...
  • 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后: 父组件 //html <tree-list :typeList="typeList" :subTypeList="subTypeList" @showSubType=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,857
精华内容 11,942
关键字:

子组件修改props中的值

友情链接: EDLR.rar