Question

我遇到了我的子组件（自动完成）需要更新其父级（Curve）的情况，并且父级需要更新其中一个子级（或完全重新呈现时）使用新的曲线组件

在我的应用中，用户可以在曲线组件列表中选择曲线。我之前的代码工作正常，但是当用户在列表中选择了另一个曲线时，组件自动完成没有更新（组件没有使用父级的值更新其值）。

此问题现已解决，但我收到此警告：

避免直接改变道具，因为该值将被覆盖每当父组件重新渲染时。相反，使用数据或基于prop值的计算属性。支持变异：＆＃34;值＆＃34;

此警告的描述确切地解释了我对组件的期望。尽管有这个警告，这段代码完全正常！

以下是代码（部分内容已被移除以简化）

// curve.vue
<template>
  <autocomplete v-model="curve.y"></autocomplete>
</template>


<script>
  import Autocomplete from './autocomplete'

  export default {
    name: 'Curve',
    props: {
      value: Object
    },
    computed: {
      curve() { return this.value }
    },
    components: { Autocomplete }
  }
</script>


// autocomplete.vue
<template>
    <input type="text" v-model="content"/>
</template>

<script>
  export default {
    name: 'Autocomplete',
    props: {
      value: {
        type: String,
        required: true
      }
    },
    computed: {
      content: {
        get() { return this.value },
        set(newValue) { this.value = newValue }
      }
    }
  }
</script>

很多人都得到了相同的警告，我尝试了一些我找到的解决方案，但我无法让它们在我的情况下工作（使用事件，将自动完成道具的类型更改为对象，使用其他计算值，......）

是否有解决此问题的简单解决方案？我应该忽略这个警告吗？

Answer 1

你可以忽略它，一切都会好起来的，但这是一个不好的做法，这是vue告诉你的。当您不遵守单一责任原则时，调试代码会更加困难。

Vue建议您，只有拥有数据的组件才能修改它。

不确定为什么事件解决方案（$emit）在您的情况下不起作用，它会抛出错误或什么？

要摆脱此警告，您还可以使用.sync修饰符： https://vuejs.org/v2/guide/components.html#sync-Modifier

Answer 2

你可以试试代码，按照library(stringr) str_extract(Target, "SS[^T]*") #[1] "SS1G_340" "SS2G_340" - ＆gt; prop - ＆gt; local data流入每个组件和组件包装器。

ps：$ emit（'input'，...）更新值（在props中）绑定v-model

$emit local data to prop

Vue2：警告：避免直接改变道具

2 个答案: