6

最近公司做项目要求使用vue,于是开始了vue的学习历程,开始的时候,整个人都是懵逼的状态, 公司项目也是比较复杂,但是开工没有回头箭,没有结果的努力就是对工作的不负责任,于是乎下定 决心一定要搞清楚,现在项目已接近尾声,大体来总结下知识点,本篇文章先来探讨一下Vue子父组件通信的问题。

首先创建两个组件,分别为父组件和子组件如图

clipboard.pngparent.png

clipboard.pngchild.png

通信分为两种,一为父组件向子组件传值,二为子组件向父组件传值,接下来一一介绍:

一、父组件向子组件传值

  1. child.vue的中创建props(可以验证数据类型),然后创建一个名为message的属性来接收

clipboard.png

2 在父组件parent.vue中,注册child组件,并在父组件中添加子组件模板,给message属性传入相应的值即可

clipboard.png

打开服务器观察,看到相应改变

clipboard.png

当然message的属性值也可以动态绑定值,:message="变量名",这里不做叙述。


二、子组件向父组件传值

  1. 先在子组件添加个按钮,点击触发事件进行传值

clipboard.png

2 在响应的事件中使用$emit来触发自定义事件,并向父级传参

clipboard.png

clipboard.png

(可以看出现在的值为空)

3 在父级添加响应事件,并监听事件,可以定义个变量childData来接收此值

clipboard.png

现在点击按钮,观看页面

clipboard.png

总结:无论是父组件向子组件传值,还是子组件向父组件传值,都需要中介,父组件向子组件传值需要props属性,子向父需要使用$emit触发自定义方法,知道这两点应该就差不多了。

刚接触vue,不对的地方还请多多指教,欢迎探讨


巧巧
57 声望4 粉丝