VUE3父子组件传值 小范例代码

xiefandaren

---

1.在Vue3中，子组件可以通过props接收父组件传递的值，也可以通过$emit方法向父组件发送事件。具体操作如下：

父组件传递值给子组件：
父组件中使用子组件时，可以在子组件标签上使用属性绑定的方式，将父组件中的数据传递给子组件：

1. <template>
   
2.   <div>
   
3.     <ChildComponent :msg="parentMsg" />
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. import ChildComponent from './ChildComponent.vue'
   
9. 
   
10. export default {
    
11.   name: 'ParentComponent',
    
12.   components: { ChildComponent },
    
13.   data() {
    
14.     return {
    
15.       parentMsg: 'Hello from parent!'
    
16.     }
    
17.   }
    
18. }
    
19. </script>

复制代码

子组件中通过props接收父组件传递的值：

1. <template>
   
2.   <div>
   
3.     {{ msg }}
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   name: 'ChildComponent',
   
10.   props: {
    
11.     msg: String
    
12.   }
    
13. }
    
14. </script>

复制代码

2.子组件向父组件发送事件：
子组件中通过$emit方法触发一个自定义事件，父组件通过在子组件标签上使用v-on绑定自定义事件的方式，监听子组件触发的事件并处理：

1. <template>
   
2.   <div>
   
3.     <button @click="sendMsg">发送消息到父组件</button>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   name: 'ChildComponent',
   
10.   methods: {
    
11.     sendMsg() {
    
12.       this.$emit('send-msg', 'Hello from child!')
    
13.     }
    
14.   }
    
15. }
    
16. </script>

复制代码

父组件中监听子组件触发的事件，并处理：

1. <template>
   
2.   <div>
   
3.     <ChildComponent @send-msg="handleMsg" />
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. import ChildComponent from './ChildComponent.vue'
   
9. 
   
10. export default {
    
11.   name: 'ParentComponent',
    
12.   components: { ChildComponent },
    
13.   methods: {
    
14.     handleMsg(msg) {
    
15.       console.log(msg)
    
16.     }
    
17.   }
    
18. }
    
19. </script>

复制代码

---