精华内容
下载资源
问答
  • 2021-04-09 16:41:57

    父组件:

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

    子组件:

    <script>
    export default {
      props: {
        num: {
          type: Number,
          default: 1
        }
      },
      methods: {
        addNum() {
          this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式
        }
      }
    }
    </script>
    
    更多相关内容
  • 理论 所有的 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中子组件是不允许直接修改组件传过来的数据,因为如果父组件传过来的数据如果是数组或者是对象的数据的话,在子组件直接修改传过来数据的话,会影响到其他组件的数据,所以要在子组件data数据里定义一个...

    在这里插入图片描述
    在vue中子组件是不允许直接修改父组件传过来的数据,因为如果父组件传过来的数据如果是数组或者是对象的数据的话,在子组件中直接修改传过来数据的话,会影响到其他组件的数据,所以要在子组件data数据里定义一个变量来保存父组件传过来的

    可以这么改:
    父组件

    <child-com @close=close></child-com>
    
    methods: {
    	close() {}
    }
    

    子组件

    <div @click='closeThisDialog'>关闭</div>
    
    methods:{
    	closeThisDialog(){
    		this.$emit('close')
    	}
    }
    
    展开全文
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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不推荐直接子组件修改组件传来的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里面的值 1、传统方法,emit触发父组件修改父组件里面的值,间接的修改组件的值 父组件 <Child :msg="msg" @handle="handle"></Child> methods: { data() { return{ msg: '这是一段...
  • 报错信息: Avoid mutating a prop directly since the value will ...原因:报错原因:props传值是单向数据流,只能由父组件传递给子组件子组件被动接受,一旦子组件自己试图修改props中的值,就会报上述错误,这样
  • 通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子 // 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `...
  • 需求:父组件通过props传递给...所以子组件需要想办法修改 props 值的一个属性。 一、使用计算属性 在 computed 中获取到 props,并通过 map 遍历数组来修改属性。 // 子组件 <template> <ul> <li
  • vue 子组件修改props中的值

    千次阅读 2020-07-31 09:03:01
    问题:子组件修改组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model 解决办法:用v-model 写个简单粗暴例子: 父组件 <control :lingthData=...
  • vue子组件修改props组件 <template> <div class=""> <child :title="title" /> </div> </template> <script> import Child from '@/components/Child' export ...
  • Vue子组件修改Props的几种情况

    千次阅读 2021-04-13 21:41:53
    首先列举平常使用Vue组件传递数据到子组件的几种情况 传递的是基础数据类型(Number,Boolean,String) 传递的是引用类型(Object,Array) 针对以上几种情况再逐一进行分析 当prop的类型为基础数据类型时 ...
  • ​ 在子组件中,props中的属性值在子组件中不能被修改,只能由父组件传值。如果子组件中需要某个属性来自于父组件,并且子组件也可修改,可以采用如下方式:listItem用来接收父组件传递的值并赋值给list。在子组件中...
  • vue3子组件可以修改props属性吗,答案是可以的
  • 1. 修改组件普通数据 使用v-mode语法,代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildComponent v-...
  • vue子组件直接修改组件的值

    千次阅读 2020-06-12 15:07:21
    但是我发现子组件可以直接修改组件传递的引用类型中的属性值。 这个是父组件login ```javascript <template> <div class="login"> <son :data1="number"/> </div> </template> &...
  • 先说问题,父组件利用props子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
  • Vue中,如果父组件子组件传的是数组或者对象这些引用类型,那么子组件可以通过props属性与父组件同步数据。 var vm = new Vue({ el: '#app', data: { // caseInfo zhifarenyuan: {}, // 执法人员 weifainfo...
  • vue-prop是父组件子组件进行传递数据时使用的。 例如子组件为 child.vue template: '<div>msg: {{msg}}</div>' props: ['msg'], 我们在子组件里规定了一个数据名字叫msg 父组件里面写 ,> 这样我们就可以在子组件...
  • 组件子组件通信 业务场景:现在我要在父组件点击...后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref=progressTwo v-else-if=progress second=recordProgress></Progress
  • 赋值为一个新的值,当监听到值变化时,同时将消息告诉父组件
  • 组件传值给子组件props子组件props接受到的值用做v-model双向数据绑定 因为props是只读的,不能修改 直接修改会报下面的错误 Avoid mutating a prop directly since the value will be overwritten whenever...
  • vue3中子组件改变props

    千次阅读 2021-05-10 16:08:08
    周所周知vueprops是单向数据流,可以从父组件中改变传往子组件props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下 //父组件中 <Toast :show.sync="shows" ...
  • 直接赋值props里面数据会导致如下错误 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后: 父组件 //html <tree-list :typeList="typeList" :...
  • 本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的...
  • vue3中子组件如何监听props

    千次阅读 2022-03-25 15:40:55
    组件:header和sidebar是两个子组件子组件header操作数据修改id的值,传给父组件,父组件再传给子组件sidebar 父组件能正常收到子组件header的传值,但是子组件sidebar只能收到id的初始值,收不到id变化的值...

空空如也

空空如也

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

vue子组件直接修改props