vue.js怎么传递参数 emit on

JavaScript029

vue.js怎么传递参数 emit on,第1张

// emit 是用来抛出事件(方法)的,如:

this.$emit('eventName', params)  // eventName: 事件名 params: 参数,多个时使用,号隔开

// on 是用来监控emit抛出的事件(方法)的,如:

this.$on('eventClick', params)

methods: {

    eventClick: function(params) {

    }

}

// 大概就是这样子,希望能帮到你~

你这个问题全部内容应该是如下吧:在视频播放的时候,能够用on监听事件的触发,如下:player.on('pause',function(){console.log('视频暂停');})player.on('ended',function(){console.log('视频结束')})这个是什么原理,怎么自定义类似pause、ended的事件,并能够用on监听?麻烦指教相当于来说你要维护一个事件队列。player对象大概有这么些属性{on: func(key, callback),emit: func(key),events: object}events是一个对象,数据结构如下:{pause: [func, func]}调用on函数时,把event的key以及callback添加到events中。调用emit函数表示相应事件触发,根据相应的key从events中获取相应的callback数组,依次执行函数。

<template>

  <div class="confirm">

    <div class="shade"></div>

    <div class="content">

      <div class="top">提示</div>

      <div class="center">{{title}}</div>

      <div class="bottom">

        <button v-on:click="clickBtn(true)">确定</button>

        <button v-on:click="clickBtn(false)">取消</button>

      </div>

    </div>

  </div>

</template>

<script>

// import Vue from 'vue'

  export default {

    name:'confirmCmp',

    props:['title'],

    data() {return {

    }},

    methods:{

        clickBtn(b){

          this.close()

          //监听result变化,并发出通知(在angularjs中叫做广播,angularjs提供了emit,broadcast和$on服务用于向子父中传递消息)

          this.$emit('result', b)

        },

        open(){

          document.querySelector('.confirm').style.display='block'

        },

        close(){

          document.querySelector('.confirm').style.display='none'

        }

    },

    mounted() {

        //垂直居中

        var windowHeight=window.innerHeight

        var domObj=document.querySelector('.content')

        var domObjHeight=domObj.offsetHeight

        //console.log(domObjHeight)不知道为啥获取不到高

        var top=windowHeight/2-77

        domObj.style.top=top+'px'

    },

    install(Vue){ //核心部分,在我们使用Vue.use()时,自动调用的是install,而install导出的必须是的组件

//        console.log('confirmCmpInstall')

 Vue.component('confirmCmp',this)

 }

  }

</script>

<style>

      .confirm{display:none

         position:fixed z-index:1width: 100%

         height: 100%

     }

      .shade{

          position:fixed

          z-index: 2

          background-color: rgb(0, 0, 0)

          opacity: 0.3

          width: 100%

          height: 100%

      }

      .content{

        background-color: white

        z-index: 3

        width: 260px

        margin: auto

        position: relative

        left: 0 right: 0

      }

    .top{

      padding-left: 20px

      background: #f6f6f6

      /*color: #212a31*/

      font-size: 16px

      font-weight: 700

      height: 46px

      line-height: 46px

      border-bottom: 1px solid #D5D5D5

    }

    .center{

      padding: 20px

      line-height: 20px

      font-size: 14px

    }

    .bottom{

      border-top: 1px solid #D5D5D5

      text-align:center

      height: 46px

      line-height: 46px

      background: #f6f6f6}

    .bottom button{width: 60px border: none height: 30px display: inline-block }

    .bottom button:first-child{background-color:#1E9FFFcolor: whitemargin-right: 3px}

    .bottom button:last-child{margin-left: 3px}

</style>

<!-- 插件开发教程 -->

<!-- https://cn.vuejs.org/v2/guide/plugins.html -->

<!-- 此办法行不通

http://www.cnblogs.com/yufann/p/Vue-Node8.html -->