vue3父子传值的方法

《vue3父子传值的方法》

在Vue3项目开发中，父子组件之间的传值是常见的需求。对于父组件向子组件传值，可以通过Props的方式；子组件向父组件传值可以利用自定义事件或者provide / inject等。

父组件向子组件传值

使用Props

这是最基础也是最常用的方式。在父组件中定义数据，并通过属性绑定的形式将数据传递给子组件。

父组件代码：
```html

import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('Hello from parent')

</p>

<p><strong>子组件代码：</strong>
```html

  <div>
    {{ message }}
  </div>
</p>


defineProps({
  message: {
    type: String,
    required: true
  }
})


<p>

子组件向父组件传值

自定义事件

子组件触发事件，父组件监听该事件并接收传过来的值。

子组件代码：
```html

import { defineEmits } from 'vue'

const emit = defineEmits(['childEvent'])

function sendToParent(){
emit('childEvent','message from child')
}

</p>

<p><strong>父组件代码：</strong>
```html

  <div>
    
  </div>
</p>


import ChildComponent from './ChildComponent.vue'

function handleChildEvent(value){
  console.log(value) // 打印出子组件传来的值
}


<p>

provide / inject

适用于多层级组件间传值。父组件通过provide提供数据，子孙组件通过inject注入使用。

父组件代码：
```html

import { provide,ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentData = ref('data from parent')

provide('providedData',parentData)

</p>

<p><strong>子孙组件代码：</strong>
```html

  <div>
    {{ injectedData }}
  </div>
</p>


import { inject } from 'vue'

const injectedData = inject('providedData')


<p>

以上就是Vue3中父子组件传值的一些方法，根据实际项目需求选择合适的方式即可。