避免直接改变道具（渲染功能）

Posted 2023-02-23

【中文标题】避免直接改变道具（渲染功能）

【英文标题】：Avoid mutating a prop directly (render function)

【发布时间】：2020-11-16 12:00:55

【问题描述】：

只是尝试使用渲染功能创建组件，但我收到了一个奇怪的警告：

以下组件：

import Vue,  CreateElement, VNode  from 'vue'

export default Vue.extend(
  name: 'p-form-input',
  props: 
    type: String,
    name: String,
    value: 
      type: [ String, Number ]
    ,
    placeholder: String,
    disabled: Boolean
  ,
  data() 
    return 
      localValue: ''
    
  ,
  watch: 
    value(value) 
      this.localValue = value
    
  ,
  mounted() 
    this.localValue = this.$props.value
  ,
  methods: 
    onInput(e: any) 
      this.localValue = e.target.value
      this.$emit('input', this.localValue)
    ,
    onChange(e: any) 
      this.localValue = e.target.value
      this.$emit('change', this.localValue)
    
  ,
  render(h: CreateElement): VNode 
    return h('input', 
      class: 'form-control',
      domProps: 
        disabled: this.$props.disabled,
        type: this.$props.type,
        name: this.$props.name,
        placeholder: this.$props.placeholder,
        value: this.localValue
      ,
      on: 
        input: this.onInput,
        change: this.onChange
      
    )
  
)

组件上的v-model="inputValue" 会触发inputValue 上的输入/更改，但我收到警告？

使用 vue 2.6.11！

编辑：

不要介意 ts-ignore，它会抱怨找不到类型，所以这更美观！！！

<template>
  <div id="app">
    <p-form-input type="text" name="some_input" v-model="inputValue" />  inputValue 
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// @ts-ignore
import PFormInput from 'vue-components/esm/components/form-input'

export default Vue.extend(
  name: 'App',
  components: 
    PFormInput,
  ,
  data() 
    return 
      inputValue: 'fdsdsfdsf'
    
  
);
</script>

【参考方案1】：

您有一个名为“value”的道具，然后在您的方法中使用了一个名为“value”的变量：

    onInput(e: any) 
      const value = e.target.value

      this.localValue = value

      this.$emit('input', value)
    ,

不要重复使用名称“值”。事实上，你甚至不需要那个变量：

    onInput(e: any) 
      this.localValue = e.target.value
      this.$emit('input', this.localValue)
    ,

onChange 也一样：

    onChange(e: any) 
      this.localValue = e.target.value
      this.$emit('change', this.localValue)
    

【讨论】：

我在发布的代码中看不到任何其他内容。你能把代码贴在你有 PFormInput 的地方吗？

您发布的错误引用了 PFormInput，但我在 OP 中没有看到 PFormInput。您能否添加引用 PFormInput 的代码？

我发布的代码是 PFormInput 组件（您可以看到 name 属性）！ name: 'p-form-input'

对不起，更清楚地说，我希望看到实际使用 PFormInput 的代码（即您拥有 的位置） 使用更多代码我可能能够重现问题，这将非常有帮助。