理解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用法其实挺多的吧,有其他用途和用法的话,希望路过的小伙伴可以做个分享~ ?

Logo

前往低代码交流专区

更多推荐