windows 网站建设,太原市做网站,怎么建设一个属于自己的网站,搜索企业信息的网站前言
组件间传值的章节我们知道父组件给子组件传值的时候#xff0c;使用v-bind的方式定义一个属性传值#xff0c;子组件根据这个属性名去接收父组件的值#xff0c;但是假如子组件想给父组件一些反馈呢#xff1f;就不能使用这种方式来#xff0c;而是使用事件的方式使用v-bind的方式定义一个属性传值子组件根据这个属性名去接收父组件的值但是假如子组件想给父组件一些反馈呢就不能使用这种方式来而是使用事件的方式父组件通过注册这个事件的监听来接收子组件的信息然后做对应的操作。
示例解析 在前面的章节我们使用父组件传递过来的值做一个计数组件的时候使用v-bind的方式传值这个时候父子组件间是单向数据流的方式即子组件无法修改父组件传来的值所以做计数器组件的时候子组件只能是拷贝一份父组件传来的值然后做计数操作本章我们提供事件的方式实现计数的功能思想就是我们修改不了父组件传递过来的值我们就可以通过事件通知父组件修改这个值代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title父子组件通过事件进行通信/titlescript srchttps://unpkg.com/vuenext/script
/head
bodydiv idroot/div/body
scriptconst app Vue.createApp({data() {return {count:1}},methods:{handleAddOne(){this.count 1;}},template: divcounter :count count add-onehandleAddOne //div});app.component(counter,{props:[count],emits:{addOne:(count) {if(count 3){alert(count);return true;}return false;}},methods: {handleItemClick(){this.$emit(addOne,this.count);}},template:div clickhandleItemClick{{count}}/div});const vm app.mount(#root);
/script
/html当我们点击显示数字的div时会执行执行handleItemClick方法向父组件传递一个add-one事件并且将目前的count值当成参数传递给父组件父组件通过add-onehandleAddOne监听add-one事件当收到这个事件后就执行handleAddOne方法让count的值加一然后由于时count的值和子组件又是绑定的所以这个值也会同步给子组件这样就会在子组件显示count1的值。 注意监听事件使用“-” 分隔符如本例中的add-one向外部发送一个事件时用驼峰命名如本例中的this.$emit(addOne,this.count);
从代码中我们可以看到从子组件向父组件传递一个事件使用的是$emit()方法这个方法可以单独传事件如this.$emit(addOne); 也可以带参数传递this.$emit(addOne,2);
另外本例中我们可以看到这样一段代码 emits:{addOne:(count) {if(count 3){alert(count);return true;}return false;}},其实这里是便于让代码的阅读者能通过emmits关键字快速知道本组件会向外传递哪些事件毕竟组件多了后会有一堆事件在代码中一个个看的确比较费劲这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值然后做些想做的操作 总结
本文主要介绍父组件和子组件之间的通信父组件可以通过v-bind的方式将值传递给子组件子组件可以使用props:[]接收然后子组件可以通过事件$emit()通知父组件自己想做的事情父组件通过事件名称的方式接收子组件的事件这里需要注意的是子组件发送事件时使用的是驼峰命名父组件定义监听时使用的是分隔符的方式命名如此就完成了父子组件的通信。
