Vue之父组件向子组件传递数据

1.创建子组件,在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props,然后创建一个名为message的属性

这里写图片描述

3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

这里写图片描述

4.我们依然可以对message的值进行v-bind动态绑定

这里写图片描述

5.对于图片的显示注意要使用’v-bind’进行绑定,因为这里是显示在属性中所以并不用大括号,而显示在HTML中的数据必须使用大括号进行包裹

这里写图片描述

总结一下:

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3中,组件可以通过使用emits来传递方法给父组件。首先,在组件中定义一个emit,用于触发传递方法的事件。然后,在组件中调用该emit来触发事件,并传递相应的参数。最后,在父组件中通过v-on指令监听组件触发的事件,并定义一个回调函数来接收传递的方法。这样就可以实现组件传递方法给父组件了。 例如,组件中定义一个名为"sendMethod"的emit: ```javascript emits: ["sendMethod"], methods: { sendData() { // 组件中的方法 this.$emit("sendMethod", "Hello from child component"); } } ``` 在父组件中,使用v-on指令监听组件触发的"sendMethod"事件,并定义一个回调函数来接收传递的方法: ```html <child-component @sendMethod="handleMethod"></child-component> ``` ```javascript methods: { handleMethod(data) { // 父组件中接收组件传递的方法 console.log(data); // 输出:Hello from child component } } ``` 这样,组件就成功地将方法传递给了父组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue3中组件向父组件传值的方法](https://blog.csdn.net/zheyiw/article/details/128857268)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue3 组件向父组件传递参数](https://blog.csdn.net/weixin_45941959/article/details/124639674)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue3的组件传递之传父(项目实操)](https://blog.csdn.net/qq_42980244/article/details/125081009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值