【Vue3 项目中父子组件之间怎样互相传值、传递方法】

在 Vue3 的项目开辟中，组件化是非常紧张的特性。父子组件之间的通讯是组件化开辟中常见的需求，本文将具体介绍 Vue3 中父子组件之间怎样互相传值以及传递方法。
一、父组件向子组件传值

1. 使用 props

props 是 Vue 中父组件向子组件传值最常用的方式。

• 子组件定义 props：在子组件中，通过props选项来声明吸收的数据。比方，我们有一个ChildComponent.vue组件，想要吸收父组件传递的message数据：
  

1. <template>
3. <div>
5. {{ message }}
7. </div>
9. </template>
11. <script setup>
13. const props = defineProps({
15. message: String
17. })
19. </script>

复制代码

• 父组件传递数据：在父组件中使用子组件时，通过属性绑定的方式传递数据。假设父组件是ParentComponent.vue：
  

1. <template>
3. <div>
5. <ChildComponent :message="parentMessage" />
7. </div>
9. </template>
11. <script setup>
13. import ChildComponent from './ChildComponent.vue'
15. const parentMessage = 'Hello from parent'
17. </script>

复制代码

这样，父组件的parentMessage就传递给了子组件的message。
2. 传递对象和数组

props 不仅可以传递根本类型的数据，也可以传递对象和数组。比方，父组件传递一个对象：

1. <template>
3. <div>
5. <ChildComponent :user="userInfo" />
7. </div>
9. </template>
11. <script setup>
13. import ChildComponent from './ChildComponent.vue'
15. const userInfo = { name: 'John', age: 30 }
17. </script>

复制代码

子组件吸收：

1. <template>
3. <div>
5. <p>Name: {{ user.name }}</p>
7. <p>Age: {{ user.age }}</p>
9. </div>
11. </template>
13. <script setup>
15. const props = defineProps({
17. user: Object
19. })
21. </script>

复制代码

二、父组件向子组件传递方法

1. 通过 props 传递方法

父组件可以将方法作为 props 传递给子组件。

• 父组件定义方法并传递：在父组件ParentComponent.vue中定义一个方法，并将其传递给子组件：
  

1. <template>
3. <div>
5. <ChildComponent :handleClick="handleParentClick" />
7. </div>
9. </template>
11. <script setup>
13. import ChildComponent from './ChildComponent.vue'
15. const handleParentClick = () => {
17. console.log('Parent method called from child')
19. }
21. </script>

复制代码

• 子组件调用方法：在子组件ChildComponent.vue中通过props调用传递过来的方法：
  

1. <template>
3. <button @click="props.handleClick">Click me</button>
5. </template>
7. <script setup>
9. const props = defineProps({
11. handleClick: Function
13. })
15. </script>

复制代码

三、子组件向父组件传值

1. 使用自定义事件

通过$emit触发自定义事件是子组件向父组件传值的常用方式。

• 子组件触发事件并传值：在子组件ChildComponent.vue中，使用defineEmits定义事件并触发，同时传递数据：
  

1. <template>
3. <button @click="sendDataToParent">Send data</button>
5. </template>
7. <script setup>
9. const emit = defineEmits(['send-data'])
11. const sendDataToParent = () => {
13. const data = 'Hello from child'
15. emit('send-data', data)
17. }
19. </script>

复制代码

• 父组件监听事件并吸收数据：在父组件ParentComponent.vue中监听子组件触发的事件，并吸收数据：
  

1. <template>
3. <div>
5. <ChildComponent @send-data="handleChildData" />
7. </div>
9. </template>
11. <script setup>
13. import ChildComponent from './ChildComponent.vue'
15. const handleChildData = (data) => {
17. console.log('Received data from child:', data)
19. }
21. </script>

复制代码

四、子组件向父组件传递方法（间接实现）

固然子组件不能直接向父组件传递方法，但可以通过自定义事件来间接实现类似的效果。

• 子组件触发事件并传递方法相干数据：子组件ChildComponent.vue触发事件并传递一些数据，这些数据可以用于父组件执行相应的逻辑：
  

1. <template>
3. <button @click="sendMethodData">Send method data</button>
5. </template>
7. <script setup>
9. const emit = defineEmits(['send-method-data'])
11. const sendMethodData = () => {
13. const methodData = { param: 'example' }
15. emit('send-method-data', methodData)
17. }
19. </script>

复制代码

• 父组件根据吸收到的数据执行方法：父组件ParentComponent.vue根据吸收到的数据执行相应的方法：
  

1. <template>
3. <div>
5. <ChildComponent @send-method-data="handleMethodData" />
7. </div>
9. </template>
11. <script setup>
13. import ChildComponent from './ChildComponent.vue'
15. const handleMethodData = (data) => {
17. // 根据data执行相应的方法逻辑
19. console.log('Received method data:', data)
21. }
23. </script>

复制代码

五、总结

Vue3 中父子组件之间的传值和传递方法是开辟中非常基础且紧张的技能。通过 props 可以实现父组件向子组件传值和传递方法，通过自定义事件可以实现子组件向父组件传值以及间接实现传递方法相干的逻辑。熟练把握这些通讯方式，可以或许帮助我们更好地构建复杂的 Vue3 应用步伐。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告