Question

我有一个Vue组件，里面有一个“ vue-webcam”组件，我的问题是我如何才能访问其中的数据“流”并将其设置为停止使用该“ vue-webcam”之外的方法' 零件。无论如何还是我必须做出一个状态

<script>
  export default{
    components:{
      'vue-webcam':{
        render:function(h){
          return h('video',{
            ...
          })
        }
        props:{
          ...
        },
        data:{
          return{
            video: '',
            stream: '', // I need to get this using my btn_stop 
            hasUserMedia: ''
          }
        }
      }
    },
    data:()=>({
      ///...
    }),
    methods:{
      btn_stop(){
        let tracks = this.stream.getTracks()[0] // How do I access the "stream" data above on my vue-webcam component
        tracks.stop()
      }
    }
  }
</script>

Answer 1

组件方法是公开可用的。您可以为组件设置ref属性，并在其上调用方法。例如，将stop方法添加到vue-webcam ...

methods: {
  stop () {
    this.stream.getTracks()[0].stop()
    this.$emit('stopped') // for extra points
  }
}

然后在父组件的模板中

<vue-webcam ref="webcam" @stopped="someOptionalEventHandler" .../>

并在btn_stop方法中...

methods: {
  btn_stop () {
    this.$refs.webcam.stop()
  }
}

在这里，Vue组件data 必须始终是一个函数，最好不是箭头函数（尤其是在需要引用组件实例属性的情况下）。因此，您上面的data属性都应该是

data () {
  return {
    // data properties
  }
}

或

data: function() {
  return {
    // data properties
  }
}

Vue JS：从不同组件访问数据

1 个答案: