vue实例方法：$emit() 事件(其一)

最新推荐文章于 2024-08-26 04:16:13 发布

wild_guiqulaixi

最新推荐文章于 2024-08-26 04:16:13 发布

阅读量2.6k

点赞数 1

分类专栏：实例方法分享文章标签： vue $emit() 页面间传值

本文链接：https://blog.csdn.net/allanwhy/article/details/89434218

版权

实例方法分享专栏收录该内容

11 篇文章 0 订阅

订阅专栏

理解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
       }