VUE从入门到入坑—06. 父子组件通信 / 几种常用的第三方组件库

Posted 2023-03-13

参考技术A

1.父组件向子组件传递数据
(1)$parent方法，在子组件中可以直接访问该组件的父实例或组件。
(2)$root方法，获取根组件对象。

2.子组件向父组件传递数据
$children：返回的是所有子组件对象的数组，再通过下标获取指定的子组件。当组件顺序不会发生变化时，用 $children；否则用 $refs。 注意 ：$refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。

注意 ：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期。父级组件在mounted生命周期函数内，才能获取到$children信息；在子组件的created生命周期函数中，可以获取到父组件的数据。顺序：父级created => 子级1created => 子级2created => => 子级1mounted => 子级2mounted => 父级mounted

常用的PC端组件库有： element-ui 、 iView 、 ant-design vue
常用的移动端组件库： Vant 、 Mint-ui

注意 ：第三方组件库，必须在Vue的下面引入

效果：

注意 *：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。

效果：

效果：