vue父子组件互相主动获取数据

一、通过获取dom元素属性

在父组件里获取子组件的数据和方法

 

二、通过props、$emit获取

通过dom元素获取的子组件的数据不能实现实时更新

vue中数据和dom渲染是异步的，此时通过dom获取的数据为空值（如果数据是通过接口获取的话）

此时可以使用$emit父组件可实现从子组件中获取数据。在父组件中引入子组件，并自定义一个事件

在父组件中自定义的事件：

在子组件中将接口获取的数据，通过参数传入：

父组件向子组件传值：

通过props：

在子组件中接收：

 并通过watch实现对该数据进行监听：（将父组件更新的值实时传递给对应的事件）

 在父组件中：（将所要传递的值currentTime通过time传递给子组件）

 vue父传子主要通过props属性：
在子组建标签上自定义一个属性，属性值为父组建要传递的数据，子元素内部通过props以数组的形式接收该组件属性名， 
vue子传父通过$emit推送事件：
在子组件标签上自定义一个事件，值为父组建的函数，子组件内部通过$emit ('事件名',数据)传递数据，父组件内部通过函数参数进行接受数据

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

三、通过evenbus获取

在main函数里全局注册

传递：（在对应的钩子函数间加载）

 （兄弟组件间传值）

接收：

Vue不同页面跳转时各页面生命周期的执行顺序_一个慢的博客-CSDN博客_vue页面切换生命周期

四、使用插槽scope

1、插槽

父组件向子组件传递内容（模板内容）

在子组件中预留插槽位置

在父组件中传递：

 2、具名插槽（有名字的插槽）（会对子组件中有名字的插槽，在父组件得到相应的匹配）

在子组件中的slot加名字（没名字的自动匹配没名字的）

 在父组件中匹配

3、作用域插槽（方便对子组件的内容进行加工处理）

在父组件中定义数组：

 在子组件中接受：

在子组件中遍历循环打印，在插槽中绑定item，（info为自定义）

 在父组件中用template中slot-scope得到子组件的数据（scope为自定义），通过.info.id得到子组件中item.id，判断对应的id对其进行相应的加工处理

this.$nextTick()的使用场景_马优晨-CSDN博客_nexttick使用场景