vue2,vue3 父子组件交互 props,emit,slot

props 

子组件可以通过 props 从父组件接受动态数据

vue2

 vue3

defineProps() 是一个编译时宏，并不需要导入

  

 

emit()

emit()子组件向父组件触发事件

vue2

this.$emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

 vue3

emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

 

  

<slot>

父组件可以通过插槽 (slots) 将模板片段传递给子组件

在子组件中，可以使用 <slot> 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)

<slot> 插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示

vue2

 vue3

 

 

相关文章:

https://cn.vuejs.org/tutorial/#step-12