精华内容
下载资源
问答
  • 2022-05-03 00:49:27
     <!-- 子组件 -->
    <template>
      <div>
        <h3>年龄{{ myAge }}</h3>
        <button @click="onClick">尝试修改props内容</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ["age"],
      data() {
        return {
          myAge: this.age,
        };
      },
      methods: {
        onClick() {
          this.myAge++;
        },
      },
    };
    </script>
    
    
    更多相关内容
  • 主要介绍了Vueprops值实时传递 并可修改的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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...
  • 理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外...尝试通过下面的方法直接修改属性 this.$props.modelValue

    理论

    所有的 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传进来的

    万次阅读 2020-04-01 17:42:54
    众所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的,但总有需要修改的时候。 前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但是却惊讶的...

    众所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。

    前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但是却惊讶的发现没有报错,以前好像有遇到直接修改抛出错误的,但这次却没有,当时也没有多想,最近空闲下来又想了下,发现自己确实**了(此处省略两字_)。原因如下:

    因为我传进来的list是个数组,属于引用类型,修改子组件相当于把父组件也同时修改了,所以没有报错,如果是个基本类型的数据直接修改那么vue会报错。

    在子组件修改props的方法:

    1. 子组件data中拷贝一份,注意引用类型需要深拷贝,根据需求可以watch监听
    data() {
        return {
            newList: this.list.slice()
        }
    },
    watch: {
        list(newVal) {
            this.newList = newVal
        }
    }
    
    2. 通过计算属性修改
    computed: {
        nList() {
            return this.list.filter(item => {
                return item.isChecked
            })
        }
    }
    
    3. 通过研究大佬们的写法又发现了一种修改方式: sync修饰符

    父组件 传进去的时候加上 .sync

    子组件 通过this.$emit(‘update:xxx’, params)

    // 父组件
    <todo-list :list.sync="list" />
     
    // 子组件
    methodName(index) {
        this.$emit('update:list', this.newList)
    }
    
    展开全文
  • 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('业务代码跑完之后的回调方法');
    })
    
    展开全文
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 子组件修改props中的

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

    千次阅读 2021-04-09 16:41:57
    父组件: <son :num.sync="num">... props: { num: { type: Number, default: 1 } }, methods: { addNum() { this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式 } } } </scrip
  • vue 修改props父组件传过来的

    千次阅读 2020-05-14 15:16:42
    父组件 <Temp :ruleForm="ruleForm" :nextClick="nextClick" :prevClick="prevClick" @next="nextOuter"></Temp> ...el-button @click="nextInner" :disabled="nextClickInner">...
  • vue 子组件修改props方法

    千次阅读 2021-03-07 19:58:18
    vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件有修改props,这里介绍三种可以修改子组件props的方法。 1.父组件用sync修饰,子...
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
  • vue修改props传进来的

    千次阅读 2021-07-01 00:09:55
    众所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的,但总有需要修改的时候。 前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但是却惊讶的...
  • 一、当直接传的是基础类型,如字符串 直接在子组件修改name时,浏览器会警告 二、当传进来是对象 修改里面的字段的,浏览器不用警告
  • Vueprops配置项

    2022-04-26 08:41:22
    props配置项功能:让组件接收外部传过来的数据
  • ​ 在子组件中,props中的属性在子组件中不能被修改,只能由父组件传值。如果子组件中需要某个属性来自于父组件,并且子组件也可修改,可以采用如下方式:listItem用来接收父组件传递的并赋值给list。在子组件中...
  • Vue在子组件中修改Props的几种情况

    千次阅读 2021-04-13 21:41:53
    首先列举平常使用Vue 父组件传递数据到子组件的几种情况 传递的是基础数据类型(Number,Boolean,String) 传递的是引用类型(Object,Array) 针对以上几种情况再逐一进行分析 当prop的类型为基础数据类型时 ...
  • 关于Vueprops的详解

    千次阅读 2021-01-14 06:37:49
    也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不能直接在模板里面渲染父元素的数据。如果子组件想要引用父元素的数据,那么就...
  • vue是数据流是单向得,常规得做法就是父组件传值,子组件自定义事件修改父组件得。 下面是两种直接在子组件中修改得方式 一.sync 修饰符(任何数据类型都适用) 这个一般大家都知道就是在子组件上 .sync <xxxxx...
  • vueprops数据变化的问题

    千次阅读 2022-02-22 21:03:32
    vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,发现存在问题,一直监听不到数据的变化,详细排查后发现是因为props在传递数据的时候子组件接收到数据...
  • 问题:Vue组件中props传值,有些可以直接修改有些不可以 分析:JavaScript 中对象和数组的变量间赋值是通过引用赋值的 ...
  • 那么反过来对子组件里的props进行修改是否可以影响父组件里的数据进行改变呢? 遵循单向数据流示例代码如下: 运行后:此时代码并不会报错 违背单向数据流示例代码如下: 运行后:此时代码会报错,但是...
  • 有些时候,不得不想添加、修改数组和对象的,但是直接添加、修改后又失去了getter、setter。 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem]...
  • vue props 传值

    2021-03-07 07:21:12
    一、子组件需要做的子组件要显式地用props选项声明它期待获得的数据props:[data]然后在组件内使用data二、父组件需要做..."haha" }}注:在传递数字的时候尽量使用静态传值三、props验证有时候我们需要对传递过来的...
  • 首先要知道Javascript 的数据类型 类型(基本类型):字符串(String) 数字(Number) 布尔(Boolean) 空(Null) 未定义(Undefined )Symbol 引用数据类型:对象(Object) 数组(Array) 函数(Function) 2....
  • 前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动。 vue官方入口 目录 一、vue2.0中props的用法...三、vue.2.0的propsvue3.0的props的对比 个人理解: 解决了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,920
精华内容 14,368
关键字:

vue修改props的值