父子组件的数据传递(计数器功能)

本文通过一个简单的计数器例子,展示了在Vue.js中如何进行父子组件间的数据传递。使用props从父组件向子组件传递初始值,并通过事件(@inc)将子组件的修改通知回父组件,更新父组件的状态。同时,还演示了如何在子组件上绑定原生事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>父子组件的数据传递</title>
  <script src="./vue.js"></script>
 </head>
 <body>
<div id="root">
<counter :count="2" @inc="handleIncrease"></counter>
<counter :count="5" @inc="handleIncrease"></counter>
<div >{{total}}</div>
    <counter @click.native="handleClick">给组件绑定原生事件,父组件写方法</counter>
</div>






<script>


var counter ={
props:['count'],
data:function(){
return{
  number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++;
this.$emit('inc',1)
}
}
}


var vm = new Vue({
el:'#root',
data:{
total:7
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){
this.total+=step
}
}


})


</script>




  
 </body>
</html>
### Vue3 父子组件间的数据传递 #### 使用 Props 和 Events 进行单向数据流通信 在 Vue3 中,父子组件之间可以利用 `props` 实现由父到子的数据流动,而通过 `$emit()` 可让子组件触发自定义事件通知给父组件。 对于 **父级向子级传递数据** 的情况: ```html <!-- ParentComponent.vue --> <template> <ChildComponent :message="parentMessage" /> </template> <script setup> import ChildComponent from './ChildComponent.vue'; import { ref } from 'vue'; const parentMessage = ref('Hello from parent'); </script> ``` 上述代码展示了如何使用冒号绑定属性的方式将变量作为 prop 传递子组件[^1]。 当涉及到 **子级向父级反馈信息** 时,则可以在子组件内部调用 `$emit()` 来发出特定名称的事件,并携带额外的信息;随后,在父组件中监听该事件并处理收到的消息。 ```html <!-- ChildComponent.vue --> <template> <button @click="sendMessageToParent">Send Message to Parent</button> </template> <script setup> defineEmits(['childEvent']); function sendMessageToParent() { this.$emit('childEvent', 'This is a message from child component.'); } </script> ``` 接着是在父组件里响应这个事件的例子: ```html <!-- ParentComponent.vue --> <template> <div> <!-- Listen for the custom event emitted by ChildComponent --> <ChildComponent @childEvent="handleChildEvent"/> </div> </template> <script setup> import ChildComponent from './ChildComponent.vue'; // Define method that will be called when an event occurs. function handleChildEvent(messageFromChild) { console.log(`Received message: ${messageFromChild}`); } </script> ``` 此部分说明了怎样设置子组件发射事件以及父组件相应地捕获它来完成双向互动[^2]。 为了更进一步展示完整的交互过程,这里给出一个综合性的例子,其中包含了从父组件入初始值至子组件,再经由用户的操作使子组件能够更新其状态并向上传递父组件的过程[^3]。 ```html <!-- ParentComponent.vue --> <template> <div> <p>Current count value received from child: {{ currentCount }}</p> <ChildComponent v-bind:initialValue="currentCount" v-on:updateCounter="updateCount"> </ChildComponent> </div> </template> <script setup> import ChildComponent from './ChildComponent.vue'; import { ref } from 'vue'; let currentCount = ref(0); function updateCount(newValue) { currentCount.value = newValue; } </script> ``` 对应的子组件实现如下所示: ```html <!-- ChildComponent.vue --> <template> <div> <p>The initial counter value passed down from parent is: {{ initialValue }}</p> <button @click="increment()">Increment Counter</button> </div> </template> <script setup> defineProps({ initialValue: Number, }); defineEmits(['updateCounter']); let localState = props.initialValue; function increment() { ++localState; emit('updateCounter', localState); } </script> ``` 在这个案例中,不仅实现了基础的数据功能,还加入了实际业务逻辑——即允许用户点击按钮增加计数器数值的同时把最新的结果同步回父组件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值