vue 2个组件，一个用于显示，一个用于更改？

Question

我想要两个组件，一个用于显示值，另一个用于通过文本字段进行更改。我不能让它工作吗？还有另一种方法吗？

我收到此错误消息： “避免直接更改道具，因为每当父组件重新渲染该值时，该值就会被覆盖。相反，请根据道具的值使用数据或计算属性。要更改的道具：“ forpris””

 Vue.component('prislapp-forpris', {
   	      props: ['forpris'],
   	      template: '<div class="prislappForpris">[[ forpris ]],-</div>',
   	      delimiters: ['[[',']]']
	   });
	   
	   Vue.component('input-forpris', {
   	      props: ['forpris'],
   	      template: '<input type="text" v-model="forpris" />'
	   });
	         
      var app = new Vue({
        el: '.previewPage',
        data: {
            lapp: {
               id: 1,
               forpris: 30595
            }
         }
      });

Answer 1

关于v-model直接变异forpris道具的全部内容。作为警告状态，您应该避免从组件中更改道具。

警告背后的理由

原因是允许子组件修改属于其父母的道具会使程序更容易出错，并且难以推理。

相反，Vue和其他面向组件的体系结构和框架背后的想法是，子组件向父级发出事件，然后父级更改其自身状态，进而通过子项的事件来修改子项。

这可确保通过道具的组件可以完全控制状态，并且可以（也可以不允许）通过道具进行所需的状态更改。

如何修正代码以避免警告

v-model是输入元素上:value和@input上的语法糖。很好读懂v-model在is this article内部的工作原理。

您应该做的是为此输入v-model：

template: '<input type="text" :value="forpris" @input="$emit('input', $event)" />'

这会将forpris设置为输入的值（就像v-model在做的那样），但是现在，该组件将自动发出input事件，而不是自动修改它用户输入输入内容。

因此，您现在需要在父级中侦听此事件并做出相应的反应。现在从您的代码中还不清楚是谁在渲染这两个组件，我想渲染来自Vue模板中的.previewPage元素，因此Vue实例是此处的父组件。

您没有显示该模板的html，但我想它类似于以下内容：

<div class="previewPage">
 <prislapp-forpris :forpriss="lapp.forpris" />
 <input-forpris :forpriss="lapp.forpris" />
</div>

您现在应该在@input组件中监听input-forpriss事件：

<div class="previewPage">
 <prislapp-forpris :forpriss="lapp.forpris" />
 <input-forpris :forpriss="lapp.forpris" @input="handleInput" />
</div>

因此，每当我们收到@input事件时，我们都会调用handleInput方法。我们还需要将这种方法添加到Vue实例中：

  var app = new Vue({
    el: '.previewPage',
    data: {
        lapp: {
           id: 1,
           forpris: 30595
        }
     },
     methods: {
       handleInput(value){
         console.log(value); // now I'm not 100% sure if this
         // is the value or a DOM event, better check
         this.lapp.forpriss = value;
       },
     }
  });