关于vue.js:vue3-中使用emits

12次阅读

共计 1077 个字符,预计需要花费 3 分钟才能阅读完成。

emits: 列表申明从父组件继承来的事件
$emit: 抛出事件,告诉父组件解决
子组件中:


export default {
  name: "MyXgPlayer",
  // 申明从父组件继承来的事件: 能够是简略数组,也能够是对象(加了校验函数)
  emits: ['just-one-player'],
  props:{
    domId: String,
    previewVideoUrl: String,
   
  },
  setup(props, context){
    // 获取以后实例(包含从父组件传过来的 props 数据, 实例办法($watch,$emit, $forceUpdate,$nextTick, 定义的全局的 $addHost
    // vue 内含的 $alert,$message,$messageBox, $store,$router, $refs ...))const {proxy} = getCurrentInstance()
     
    let player = ref(null)
    onMounted(()=>{
        //new 数据
        player.value = new Player ({
        id: props.domId,
        url: props.previewVideoUrl,
      
      });
      // 监听 play 事件
      player.value.on('play', ()=>{console.log("start $emit")
        // 给父组件抛事件
        proxy.$emit("just-one-player", props.domId, player)    
      })
    
    })
  },
  
}

父组件中

                <my-xg-player 
                :dom-id="'xgplayer_test_'+file.collection_id":preview-video-url="file.file_path"@justOnePlayer="justOnePlayer"
                  />
<!--script 中 -->
import {ref} from "vue"
setup(props, context){const xgplayers = ref({})
   const justOnePlayer = (domId, player)=>{console.log("receive $emit")
          for(let item_key in state.xgplayers){if(item_key !== domId){state.xgplayers[item_key].pause()}
          }
          state.xgplayers[domId] = player
        }
    return {
        xgplayers,
        justOnePlayer
      }
    }
}

点击子组件中的播放,打印的 log

start $emit
receive $emit
正文完
 0