精华内容
下载资源
问答
  • vue子组件修改props
    2021-04-16 17:17:39

    vue 在子组件中修改props

    父组件

    <template>
      <div class="">
      	<!-- 第一种方法 -->
        <child :title="title" />
        
        <!-- 第二种方法,添加修饰符sync -->
        <child :title.sync="title" />
      </div>
    </template>
    
     <script>
    import Child from '@/components/Child'
    
    export default {
      name: 'Parent',
      components: {
        Child,
      },
      data() {
        return {
          title: '标题',
        }
      },
    
      methods: {},
    }
    </script>
    

    子组件

    <template>
      <div class="">
        <span>{{title}}</span>
        <el-button @click="handleClick">修改标题</el-button>
      </div>
    </template>
     <script>
    export default {
      name: 'Child',
      props: {
        title: {
          type: String,
          default: '',
        },
      },
      data() {
        return {}
      },
      methods: {
        handleClick() {
          // 修改子组件传过来的title
          const newTitle = '新标题'
          
          <!-- 第一种方法 -->
          this.title = newTitle
          
    	<!-- 第二种方法,添加修饰符sync -->
    	this.$emit('update:title', newTitle)
        },
      },
    }
    </script>
    
    更多相关内容
  • 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

    父组件:

    <son :num.sync="num"></son>
    

    子组件:

    <script>
    export default {
      props: {
        num: {
          type: Number,
          default: 1
        }
      },
      methods: {
        addNum() {
          this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式
        }
      }
    }
    </script>
    
    展开全文
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。...Vue3 Props 文档 尝试通过下面的方法直接修改属性值 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的值,会报错 [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组件传递数据到子组件的几种情况 传递的是基础数据类型(Number,Boolean,String) 传递的是引用类型(Object,Array) 针对以上几种情况再逐一进行分析 当prop的类型为基础数据类型时 ...

    首先列举平常使用Vue 父组件传递数据到子组件的几种情况

    • 传递的是基础数据类型(Number,Boolean,String)
    • 传递的是引用类型(Object,Array)

    针对以上几种情况再逐一进行分析

    1. 首先定义一个子组件ChildComponent
    <template>
        <div>
            我是子组件
            <input v-if="usePrimary" v-model="primaryType"/>
            <input v-else v-model="objectType.value"/>
        </div>
    </template>
    
     props:{
            primaryType:{
                type:String,
                default:''
            },
            usePrimary:{
                type:Boolean,
                default:true
            },
            objectType:{
                type:Object
            }
        }
    
    1. 然后在父组件中赋值
    <child-component 
        class="child-component"
        :primaryType="primaryType"
        :object-type="objectType"
        :use-primary="usePrimary"
    ></child-component>
    
    data(){
       return{
            primaryType:'我是基础数据类型',
            objectType:{value:'我是引用类型'},
            usePrimary:false
        }
     }
    

    变量 usePrimary 用于控制子组件 input 的v-model引用的类型 当值为true 时表示v-model的类型为 基础数据类型,当值为false 时表示v-model是引用类型即(Object,Array)

    结果展示

    • 当prop的类型为基础数据类型时(usePrimary 为 true)

    控制台会报错!!

    在这里插入图片描述

    • 当prop的类型为引用类型时(usePrimary 为 false)

    控制台没有任何错误信息!!!
    在这里插入图片描述

    结论

    1. 当传给子组件的Prop为基本数据类型是(Number,String)在子组件中修改Prop控制台会报错 prop的值不会改变
    2. 当传给子组件的Prop为引用时(Object,Array)在子组件中修改Prop的属性不会报错且值可以改变

    当然不建议在子组件中直接修改Prop的值,因为这样会破坏单一数据流,可能会导致数据的变化无法追踪。

    展开全文
  • vue中子组件是不允许直接修改组件传过来的数据,因为如果父组件传过来的数据如果是数组或者是对象的数据的话,在子组件直接修改传过来数据的话,会影响到其他组件的数据,所以要在子组件data数据里定义一个...
  • vue 子组件修改props方法

    千次阅读 2021-03-07 19:58:18
    vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件修改props的,但偶尔有需要在子组件修改props,这里介绍种可以修改子组件props的方法。 1.父组件用sync修饰,...
  • 最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴。 1. 修改组件普通数据 使用v-mode语法,代替了vue2.x的....
  • 报错信息: Avoid mutating a prop directly since the value will ...原因:报错原因:props传值是单向数据流,只能由父组件传递给子组件子组件被动接受,一旦子组件自己试图修改props中的值,就会报上述错误,这样
  • 直接赋值props里面数据会导致如下错误 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后: 父组件 //html <tree-list :typeList="typeList" :...
  • 需求:父组件通过props传递给...所以子组件需要想办法修改 props 值的一个属性。 一、使用计算属性 在 computed 中获取到 props,并通过 map 遍历数组来修改属性。 // 子组件 <template> <ul> <li
  • 赋值为一个新的值,当监听到值变化时,同时将消息告诉父组件
  • ​ 在子组件中,props中的属性值在子组件中不能被修改,只能由父组件传值。如果子组件中需要某个属性来自于父组件,并且子组件也可修改,可以采用如下方式:listItem用来接收父组件传递的值并赋值给list。在子组件中...
  • 组件:header和sidebar是两个子组件子组件header操作数据修改id的值,传给父组件,父组件再传给子组件sidebar 父组件能正常收到子组件header的传值,但是子组件sidebar只能收到id的初始值,收不到id变化的值...
  • 通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子 // 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `...
  • vue 子组件修改props中的值

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

    千次阅读 2021-05-10 16:08:08
    周所周知vueprops是单向数据流,可以从父组件中改变传往子组件props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下 //父组件中 <Toast :show.sync="shows" ...
  • Vue - 解决子组件修改props值报错 其实这就是Vue的单向数据流的概念 单向数据流 父级prop的更新会向下流动到子组件中,子组件中所有的 prop 都将会刷新为最新的值 但是反过来则不行。你不应该在一个子组件内部...
  • 通过父组件sync修饰符 + 子组件emit事件实现修改prop取巧方式3.通过赋值到data实现修改prop4.通过计算属性监听实现修改prop 前言 实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景...
  • 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子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
  • vue1.0升级至2.0之后 prop的.sync被去除 因此直接子组件修改父组件的值是会报错的如下: 目的是为了阻止组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?思路是通过...
  • Vue 子组件修改父组件props值 wangEditor

    千次阅读 2019-03-30 08:59:58
    首先说点题外话,子组件修改父组件的值,这个内容很多人都写过,但是很大一部分是基于 Vue2.0 写的,需要在父组件中专门定义一个方法/函数,很是麻烦。今天仔仔细细把官方文档看了一下,有了今天这篇博客。 首先这...
  • Vue崇尚单向数据流,本来不应该直接修改的,.sync这个黑科技可以直接改 <navBar :names.sync="names"> </navBar> //编译时会被扩展为 <navBar :names="names" @update:names="val => names =...
  • 本文介绍了 vue中component组件props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class=tem1>{{message}}</div>' }); ...
  • vue子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,405
精华内容 12,562
关键字:

vue3子组件直接修改props