vue 父组件向子组件通过props传递数据不能用v-model绑定?

  1. 父组件代码
    <template>
        <div>
            <item1 :test="{test:1}"></item1>
        </div>
    </template>
  1. 子组件代码
<template>
    <div>
        <input v-model="test.test">
    </div>
</template>
<script>
    export default {
        props: {
            test: Object
        }
    }
</script>

此时我们在子组件input框中任意修改是不报错的,应为我们通过父组件传过来的值是复合类型数据,当我们改为普通类型的数据时就会报错,如下

clipboard.png

报错的原因是我们修改如下

  1. 父组件代码
    <template>
        <div>
            <item1 :test="1"></item1>
        </div>
    </template>
  1. 子组件代码
<template>
    <div>
        <input v-model="test">
    </div>
</template>
<script>
    export default {
        props: {
            test: Number
        }
    }
</script>

有谁能解释下么?

回答:

1.如果父祖件传过来的是基本数据类型,其实子组件用v-model一样可以改,给你报的是warning而不是报错,也就是说,vue是可以由子组件直接修改父祖件的值的,只是 强烈不推荐

2.为什么基本数据类型会报warning而复杂数据类型不会?这考的纯粹就是你对js里两种数据类型的内存的理解,网上搜索详细的资料有很多,展开讲也能讲很多,题主可以按需补相关的知识。

3.最后,尤雨溪本人不反对这种方式,可以作为一个父子组件间双向通信的简易方案。

回答:

vue 单向数据流动 子组件想修改父组件的值 需要用 $emit

第一次绑定的是引用数据类型,绑定的是引用地址,子组件修这个引用类型的值,vue不会报警告。
第二次 基础类型值 子组件直接修改 父组件传递的props vue会抛出警告。

回答:

以前是可以的,貌似有个版本更新之后就会报警告了,子组件不能直接修改props数据。能修改的方式很多,可以用emit触发,或者搭一个bus线,或者用vuex。直接修改的方式不提倡。

回答:

你可以不用props 链接描述

参考一下这个 也可以实现你的需求

回答:

报错信息不是说的很清楚了不能直接修改props
你可以设置:value.sync

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注