首页 > 其他 > 详细

(复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

时间:2019-12-23 20:13:06      阅读:1652      评论:0      收藏:0      [点我收藏+]

标签:双向   spa   new   ops   单向   vue   

报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component........

原因:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。(父组件更新,子组件中的prop值也会更新,但子组件不能修改由父组件传递过来的值)

不能直接对父组件传来的值进行双向绑定,要先子组件里定义新的变量来接收父组件传来的值,接着我们可以使用v-modal+watch属性 或者 使用:binfd="" + @input=" func"(再定义这个func通过传入的event 得到改变的值,将event.target.value赋值给新变量)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8 </head>
 9 <body>
10 
11   <div id="app">
12     <h3>我是父组件</h3>
13     <templ :num-from-father="fatherData"
14     :num-from-father2="fatherData2"
15     @change1="changeFunc1"
16     @change2="changeFunc2"/>
17   </div>
18 
19   <template id="temp">
20     <div>
21       <h3>我是子组件</h3>
22       <p>props1:{{numFromFather}}</p>
23       <p>转存的值:{{receiveNum1}}</p>
24       <!-- 方法1  -->
25       <input type="number" :bind="receiveNum1" @input="receiveNum1Input">
26       <p>props2:{{numFromFather2}}</p>
27       <p>转存的值:{{receiveNum2}}</p>
28       <!-- 方法2 使用watch  -->
29       <input type="number" v-model="receiveNum2">
30     </div>
31   </template>
32   <script src="/js/vue.js"></script>
33   <script>
34     const vm = new Vue({
35       el:‘#app‘,
36       data:{
37         fatherData:0,
38         fatherData2:10
39       },
40       methods: {
41         changeFunc1(value){
42           this.fatherData = value*1;
43         },
44         changeFunc2(value){
45           this.fatherData2 = value*1;
46         }
47       },
48       components:{
49         templ:{
50           template:‘#temp‘,
51           props:{
52             numFromFather:Number,
53             numFromFather2:Number,
54           },
55           data(){
56             return{
57               receiveNum1:this.numFromFather,
58               receiveNum2:this.numFromFather2,
59             }
60           },
61           methods: {
62             receiveNum1Input(event){
63               this.receiveNum1 = event.target.value;
64               this.$emit(‘change1‘,this.receiveNum1);
65               this.receiveNum2 = this.receiveNum1*100;
66               this.$emit(‘change2‘,this.receiveNum2);
67             }
68           },
69           watch: {
70             receiveNum2(newValue){
71               this.receiveNum2 = newValue;
72               this.$emit(‘change2‘,this.receiveNum2);
73               this.receiveNum1 = this.receiveNum2/100;
74               this.$emit(‘change1‘,this.receiveNum1);
75             }
76           },
77         }
78       }
79     })
80   </script>
81 </body>
82 </html>

(复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

标签:双向   spa   new   ops   单向   vue   

原文:https://www.cnblogs.com/sweetC/p/12085375.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号