Доступ к методу компонента из родительского метода

Question

Доступ к методу компонента из родительского метода

1

Я пытаюсь выяснить, как я могу вызвать событие нажмите на мой составной элемент <img> от родительского метода addPhoto() так openUploader() метод будет работать.

Я хочу открыть загрузчик файлов после нажатия нового элемента на photos.

После этого: this.photos.push(newPhoto);

Попытка подхода № 1:

Я пытался сделать это this.openUploader(), я знаю, что это не сработает, потому что метода там нет. Как я могу получить доступ к "newPhoto", поэтому могу сделать что-то вроде этого: this.newPhoto.openUploader(). Я попытался добавить v-model на <img> но она не работает.

Попытка подхода №2:

У Vue есть способ сделать что-то вроде этого: <img {{ clickThis(): openTheUploader }} >

Я знаю, как это сделать/щелкнуть по нему с помощью ванильного JS/jQuery, пройдя через DOM, но я пытаюсь узнать, возможно ли это в Vue JS (я думаю, да), я просто не знаю, как это сделать.

Vue.component('gallery', {
    template: '<div><img v-bind:src="photo" v-on:click="openUploader()" alt="Blank Photo" /><input type="file" ref="photoUploader"></div>',
    props: ['photo'],
    methods: {
        openUploader: function(){
        
           this.$refs.photoUploader.click();
                
        }
    }
});

var photoGallery = new Vue({
    el: '#photoGallery',
    data: {
        photos: [
                   { 
                     'id'   : 1,
                     'photo': 'https://vuejs.org/images/logo.png'
                   }
                ]
    },
    methods: {
        addPhoto: function(){
        
          var newPhoto = [
                          {
                            'id'   : 2,
                            'photo': ''
                          }
                       ];
          this.photos.push(newPhoto);
          // I want to open file uploader of new blank photo here
        
        }
    }
});

[type="file"]{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="photoGallery">

  <gallery v-for="(photo, index) in photos"
           v-bind:key="photo.id"
           v-bind:photo="photo.photo"></gallery>
  <button v-on:click="addPhoto()">
    Add Photo
  </button>

</div>

rmondesilva 27 нояб. 2017, в 09:29

Источник

0

Проверьте ответ здесь: stackoverflow.com/a/47494953/7814783
Vamsi Krishna 27 нояб. 2017, в 08:55
0

Я думаю, как реагировать, мы можем экспортировать компоненты из дочернего и затем импортировать его в родительский. Итак, если это возможно, что конкретные methods : { } "возможность экспорта" из методов объекта? Также, если я ошибаюсь, Вы можете воспользоваться помощью государственного управления, которое будет намного лучше
Meet Zaveri 27 нояб. 2017, в 14:09

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Проверьте ответ здесь: stackoverflow.com/a/47494953/7814783
Я думаю, как реагировать, мы можем экспортировать компоненты из дочернего и затем импортировать его в родительский. Итак, если это возможно, что конкретные methods : { } "возможность экспорта" из методов объекта? Также, если я ошибаюсь, Вы можете воспользоваться помощью государственного управления, которое будет намного лучше

bbsimonbb · Answer 1 · 2017-11-27T07-20-00.000Z

Чтобы вызвать методы для компонента, вам необходимо указать компонент ref. Поэтому в тэге <gallery> поставьте ref="gallery". Затем в вашем корневом vue вы можете сделать this.$refs.gallery.openUploader();