亲子组件之间的交流是vue的基础知识,现简单整理如下。
总的来说,父传子通过props,子传子通过$emit。
用简单的demo说话吧。 首先进入代码
父程序集:
如图所示,HelloWorld是一个子组件,将它引入并注册到父组件中,然后渲染此定制组件标签。 首先,让我们看一下父bzdl参数。 在父组件的data中定义变量sw,然后通过动态绑定将动态qq变量绑定到子组件标签并传递sw变量。 所有组件注入属性都是动态绑定的。 否则,它将被视为字符串。
子组件:
子组件使用props接收参数。 需要注意的是,props中的接收变量必须与动态绑定的变量匹配。 否则就收不到。 例如,这里都使用了名为qq的变量。 console应如下所示
但是,将接收变量更改为mm时,console如下所示
这样就完成了对父组件bzdl组件的引用。
其次是孩子对父母的参与。 如上所述,在emit中进行。 这是通过在子组件内部的鳗鱼皮卡丘需要参与父组件时定制事件来完成的。 上图定义了ok的事件。 必须在父组件中通过v-on/@接收此事件,而无需执行任何操作。 当接收到此事件时,将自动执行并自动执行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等,都必须在调用时加上。
最后,需要指出的是,父子组件的通信方式是典型的观察者模型。