Vue3:组件通信、组件生命周期

父子通信

  1. 父组件



  1. 子组件



子传父

props 只读,子组件改不了父组件传递过来的值,需要传递给父组件,由父组件进行更改。

  1. 子组件



  1. 父组件



provide 和 inject 组件通信

实现祖孙组件之间的通信。
祖组件通过 provide 提供数据,孙组件通过 inject 对象来接收数据。

# 语法格式
provide(参数, '别名');
inject('别名');
  1. 祖组件(传递数据)
let car = reactive({name: '奔驰G63', price: '100W'});
provide(car, 'car')
  1. 孙组件(接收数据)
const car = inject('car')

组件生命周期

setup 在组件初次挂载前、重新挂载前都会执行。

生命周期 说明
onMounted 组件挂载完成后执行
onUpdated 组件数据更新后执行
onUnmounted 组件卸载后执行

你可能感兴趣的:(全栈开发学习日记,#,第八章:Vue3全家桶,vue.js,javascript,ecmascript,前端框架,前端)