一、通过获取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使用场景

Logo

前往低代码交流专区

更多推荐