精华内容
下载资源
问答
  • 2020-07-31 09:03:01

    问题:子组件想修改父组件传来的值(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

    更多相关内容
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue修改props里面的 1、传统方法,emit触发父组件修改父组件里面的,间接的修改组件的 父组件 <Child :msg="msg" @handle="handle"></Child> methods: { data() { return{ msg: '这是一段...

    vue修改props里面的值

    1、传统方法,emit触发父组件修改父组件里面的值,间接的修改子组件的值

    父组件

    <Child :msg="msg"  @handle="handle"></Child>
    methods: {
        data() {
            return{
                msg: '这是一段原始数据'
            }
        },
    	handle(val) {
             this.msg = "修改之后的值,单向流, 子组件也跟着改变";          
        }
    }
    

    子组件

    <button @click="changes">修改</button>
    
    props: {
    	msg: {
            type: String,
            default: ""  
        }
    },
    
    methods: {
    	changes() {
             this.$emit('handle', '修改之后的值');
        }
    }
    

    2、父组件传值用sync修饰

    父组件 传值的时候用sync修饰

    <HelloWorld :msg.sync="msg"></HelloWorld>
    

    子组件接值

    props: {
    	msg: {
           type: String,
           default: ''    
        }
    },
    
    methods: {
       // 修改props传进来的值
       handle() {
           this.$emit('update:msg', '修改之后的值');  // 这样父组件就会变化响应的值
       }
    }
    

    以上都是针对基本数据类型, 引用数据类型直接在子组件里面改就可以了

    回调函数的使用

    const test = function(cb) {
    	// 自己的业务代码
    	cb && cb();
    }
    
    // 调用test方法, 传进去一个函数
    test(function() {
    	console.log('业务代码跑完之后的回调方法');
    })
    
    展开全文
  • 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方法

    千次阅读 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>
    
    展开全文
  • 另外,每次父级组件发生变更时,子组件中所有的 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>
    
    

    关键词:单向数据流

    展开全文
  • 需求:父组件通过props传递给...所以子组件需要想办法修改 props 的一个属性。 一、使用计算属性 在 computed 中获取到 props,并通过 map 遍历数组来修改属性。 // 子组件 <template> <ul> <li
  • Vue中,如果父组件子组件传的是数组或者对象这些引用类型,那么子组件可以通过props属性与父组件同步数据。 var vm = new Vue({ el: '#app', data: { // caseInfo zhifarenyuan: {}, // 执法人员 weifainfo...
  • vue子组件修改props组件 <template> <div class=""> <child :title="title" /> </div> </template> <script> import Child from '@/components/Child' export ...
  • 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的几种情况

    千次阅读 2021-04-13 21:41:53
    首先列举平常使用Vue组件传递数据到子组件的几种情况 传递的是基础数据类型(Number,Boolean,String) 传递的是引用类型(Object,Array) 针对以上几种情况再逐一进行分析 当prop的类型为基础数据类型时 ...
  • ##vue:子组件接收props值并需要对这个值进行修改的解决办法 最进刚刚从微信小程序转过来,发现了vue与其有很大的相似之处,相比之下vue确实是方便了很多(特别是vue的#双向绑定),对于组件的话vue方面限制了子组件对父...
  • vue2.0 子组件改变props值,并向父组件传值为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用; prop 作为初始值传入,由子组件处理成其它数据输出...
  • vue 子组件接收props值做操作

    千次阅读 2020-06-02 15:43:55
    props: {    permission: {      type: Array,          default() {             ...
  • Vue 子组件修改父组件的解决方法

    千次阅读 2020-10-21 22:51:30
    但我们可能会遇到,需要在子组件修改父组件的需求,这里介绍三种方法实现: 实现 方法一:通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改 组件:接受父组件传来的cateId,但是组件
  • ​ 在子组件中,props中的属性子组件中不能被修改,只能由父组件传值。如果子组件中需要某个属性来自于父组件,并且子组件也可修改,可以采用如下方式:listItem用来接收父组件传递的并赋值给list。在子组件中...
  • 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据改变动态操作 后面,我是通过操作dom的...
  • 通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子 // 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `...
  • 先说问题,父组件利用props子组件传值,浏览器 console 有这个,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
  • 组件传值给子组件props子组件props接受到的用做v-model双向数据绑定 因为props是只读的,不能修改 直接修改会报下面的错误 Avoid mutating a prop directly since the value will be overwritten whenever...
  • 报错信息: Avoid mutating a prop directly since the value will ...原因:报错原因:props传值是单向数据流,只能由父组件传递给子组件子组件被动接受,一旦子组件自己试图修改props中的,就会报上述错误,这样
  • vue3子组件可以修改props属性吗,答案是可以的
  • 1. 修改组件普通数据 使用v-mode语法,代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildComponent v-...
  • 父传:在父组件中绑定,在子组件中用props接收 传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是...
  • vue3中子组件改变props

    千次阅读 2021-05-10 16:08:08
    周所周知vueprops是单向数据流,可以从父组件中改变传往子组件props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下 //父组件中 <Toast :show.sync="shows" ...
  • Vue崇尚单向数据流,本来不应该直接修改的,.sync这个黑科技可以直接改 <navBar :names.sync="names"> </navBar> //编译时会被扩展为 <navBar :names="names" @update:names="val => names =...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,456
精华内容 12,982
关键字:

vue子组件修改props的值

友情链接: Scalping Paradise.zip