Vue JS: доступ к данным из другого компонента

Question

Vue JS: доступ к данным из другого компонента

1

У меня есть компонент 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>

BGTabulation BGTabulate 31 июль 2018, в 05:31

Источник

0

создайте логическое значение isPlaying: true в данных вашего родительского компонента, передайте его vue-webcam в качестве реквизита. в btn_stop() установите для isPlaying значение false, и теперь ваша vue-webcam может обрабатывать треки, наблюдая за isPlaying
Eric Guan 31 июль 2018, в 03:39

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

создайте логическое значение isPlaying: true в данных вашего родительского компонента, передайте его vue-webcam в качестве реквизита. в btn_stop() установите для isPlaying значение false, и теперь ваша vue-webcam может обрабатывать треки, наблюдая за isPlaying

Phil · Accepted Answer · 2018-07-31T02-16-00.000Z

Компонентные методы доступны публично. Вы можете установить свойство 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()
  }
}

Пока вы здесь, data компонента Vue всегда должны быть функцией и предпочтительно не функцией стрелки (особенно, если вам нужно обратиться к свойствам экземпляра компонента). Поэтому оба ваших свойства data должны быть

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

или же

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

Оно работает. И спасибо за советы