vue自定义组件实现v-model双向绑定

文章转自:https://blog.csdn.net/liub37/article/details/83382205

vue中父子组件通信,都是单项的,直接在子组件中修改prop传的值vue也会给出一个警告,接下来就用一个小列子一步一步实现了vue自定义的组件实现v-model双向绑定,父组件值变了子组件也会跟着变,子组件中传过来的值变了,父组件值也会跟着变化。如有错误的地方欢迎评论指出

父级组件



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
子组件



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
预览

这时候我们点击父级组件中的改变内容按钮,发现一切正常,没有问题

然后我们再点击子组件中的改变内容按钮,发现父级组件没变化,子组件虽然变了,但是vue给出了警告,因为是单向数据流,子组件不应该直接修改prop传的值。难道就没哟办法了吗,办法肯定是有的,继续往下看。

只需要将代码稍微改造下,如下,在data中顶一个myValue值,指向prop传过来的value,点击按钮改变内容的时候,改变myValue的值,这样vue就不会给出警告了。



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
此时还没完,发现子组件的内容变了,父级组件的内容却没有变化,点击父级组件的改变内容按钮后,子组件的内容也没变化,继续对代码进行改造


最终改造后的代码如下,重点是加个watch,监听父组件传过来的value和子组件的myValue




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
看下动态效果图,父变子变,子变父变,也没有报错警告。

甚至还可以加个input框,也是没有问题的

————————————————
版权声明:本文为CSDN博主「寻梦无痕」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/liub37/article/details/83382205

你可能感兴趣的:(VUE学习)