Vue中的组件通信

本文详细介绍了在Vue.js中如何进行父子组件间的通信,包括使用`v-bind`传递属性,以及在子组件中通过`props`接收和定义默认值。同时,讲解了子组件如何通过`$emit`触发事件并传递数据给父组件,以及父组件如何监听并响应这些事件。通过实例展示了Vue.js中组件交互的基本方法。
摘要由CSDN通过智能技术生成

父组件传给子组件

在父组件上的子组件标签内使用V-bind:传过去的名字=‘传过去的变量’,

在子组件内用props接受父组件内传过来的变量的名字使用方法

第一种接收方法

props=['传过来的名字']

第二种接收方法:是父组件没有传过来的值时子组件可以有一个默认的值

props:{

传过来的名字:{

type:定义传过来的数据的类型,可以是(number,string,Array,boolean,还可以有空和未定义一般不会传),(有个逗号)

default:['接受的数据存储的地方(没有数据传过来自动使用里面的数值)']

}

}

子组件给父组件是能通过事件传过去

在子组件的methods:{

通过一个事件传送

这个是写法this.$emit("要传送的事件名",还可以放一个数值比如下标)

}

在父组件里面接受

在父组件里面的子组件的标签上写v-on:名字=‘传过来的事件名字(要传送的事件名)’

在父组件里面的methods:{

调用      名字(){

里面要执行的代码

}
 

}
 


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值