vue实例方法:$emit() 事件(其一)
理解emit是做什么用的官方给出的解释是,触发当前事件附加参数都会传给监听器回调。。。然后就会一大串东西了。详情可以看官网对它 的解释:$emit()那么就来个栗子吧~我有两个.vue页面:shopCart页面和cartcontrol页面。cartcontrol页面作为组件被shopCart页面应该用。这是shopCart页面需要做的事~import cartcontrol fr...
·
理解emit是做什么用的
官方给出的解释是,触发当前事件附加参数都会传给监听器回调。。。
然后就会一大串东西了。
详情可以看官网对它 的解释:$emit()
那么就来个栗子吧~
- 我有两个.vue页面:shopCart页面和cartcontrol页面。
- cartcontrol页面作为组件被shopCart页面应该用。
- 这是shopCart页面需要做的事~
import cartcontrol from ‘./component/cartcontrol’
<div class="cartcontrol-wrapper">
<app-cart-control type='3' :food="food" @myIsShop="myIsShop"></app-cart-control>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="shopcart-mask" v-show="listShow" @click="hideMask"></div>
</div>
</template>
<script>
import service from '../../../http'
import Cookies from 'js-cookie';
import BScroll from 'better-scroll'
import CartControl from '../../cartcontrol/CartControl'
- 事件名是@myIsShop=“myIsShop”
- 在method中写方法myIsShop(),从cartconctrol中传值过来~
//cartControl中的isShop 判断是否<200元
myIsShop(money) {
this.isShop = money
},
- cartcontrol页面中,将在触发点将值,放进emit()中
if(this.isShop<200) {
this.$emit('myIsShop', {isShop:this.isShop})
Toast('您下单后的余额将小于200元,无法下单')
this.decreaseCart()//由于会多出发一次add接口,需要再调用一次minus接口减一次
this.issss = false
}else {
this.issss = true
}
如此cartcontrol.vue可以将获得的参数值通过$emit(),传给shopCart.vue
不知道理解的对吗,$emit用法其实挺多的吧,有其他用途和用法的话,希望路过的小伙伴可以做个分享~ ?
更多推荐
已为社区贡献2条内容
所有评论(0)