父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理。
总的来说父传子是通过props,子传父是通过$emit。
简单的一个demo来说说,先上代码
父组件:
在这里插入图片描述
如图,HelloWorld是一个子组件,将它引入父组件并注册然后渲染这个自定义组件标签,第一点先看父向子传参,我们在父组件的data里定义了一个变量sw,并且在子组件标签上通过动态绑定的方式绑定了一个动态的qq变量来将sw变量传下去(凡是组件注入属性都得动态绑定,不然就会被当成字符串)
子组件:
在这里插入图片描述
在这里插入图片描述
子组件使用props接收参数,必须注意的是,props里的接收变量必须和动态绑定的那个变量一致,不然就接收不到,比如这儿都是用的qq这个变量,console如下
在这里插入图片描述
但是将接收变量改为mm时,console如下
在这里插入图片描述
在这里插入图片描述
到此,父组件向子组件传参就完成了。
接下来是子向父传参,前面说过是通过emit完成的,做法是在子组件内部当你需要向父组件传参时就自定义一个事件,如上图定义了一个ok的事件,这个事件不用做任何操作,需要做的是在父组件内去用v-on/@来监听这个事件,当监听到这个事件被传出时,那么print方法会自动执行,并且是自动获取到子组件传出来的参数作为print的入参(不需要写括号加形参的方式),如果加了反而会报错
在这里插入图片描述在这里插入图片描述
而正常时会是
在这里插入图片描述
然而会有报错
在这里插入图片描述
这是因为我们修改了由父组件传下来的参数,默认是不能直接修改props传进的参数的
还有就是props的写法,可以是像上图一样直接写数组,然后将接收变量定义成字符串,那么无论父组件传下来的是单个变量还是一个对象,其实都能被存进这个字符串的接收变量,当然还可以定义成对象的形式,同理,对象的属性名也必须和父组件传下来的保持一致
在这里插入图片描述
对象属性名改为了oo,就没有接收到数据
同样这儿的default可以去掉,他只是表示一种默认值
在这里插入图片描述
在这里插入图片描述
关于props还有一点是,它其实和data一样,都是定义数据的地方,只不过是props外部,data内部,
所以props里的变量名不能和data里的重复,会报错
关于emit也有几点:
在这里插入图片描述
在这里插入图片描述
它的原理是通过emit这个方法向父组件暴露自定义的事件ok,父组件监听这个自定义事件ok,当有参数self.qq被传出时,那么print方法将self.qq作为实际参数。
emit只能有两个参数,第一个是自定义事件,第二个是要传递的参数,若参数很多,那么只能将其包装成一个对象,然后在第二个参数传递出去。
至于为什么会加美元符号,是因为所有vue实例本身自带的属性在调用时都要加,比如根元素el,状态data,props在调用时都得加美元符号。

最后只得一提的是,这种父子组件的通信方式是典型的观察者模式。

Logo

前往低代码交流专区

更多推荐