1

Есть такой искусственный пример:

<body>
    <button>open popup #1</button>

    <popup
        inline-template
    >
        <div class="popup popup_1">
            Content #1
        </div>
    </popup>

    <popup
        inline-template
    >
        <div class="popup popup_2">
            Content #2
        </div>
    </popup>
</body>
...

<script>
    Vue.component('popup', {
        methods: {
            open: function() {
                // ...
            },
        }
    });

    var app = new Vue({
        el: 'body',
    });
</script>

Как сделать, чтобы при клике по кнопке вызывался метод open для компонента с текстом «Content #1».

4
  • Попробуйте myclabs.github.io/jquery.confirm, вам понравится :)
    – And
    26 авг 2016 в 14:20
  • @And, спасибо за ответ, но не в этом суть, мне нужно разобраться, как передавать данные между компонентами Vue.js. 26 авг 2016 в 14:23
  • а зачем столько либ тянуть? Когда confirm работает куда более проще и красивее. Но если хотите, то пидется изучать api и даже возможно придется вмешиваться в Vue, если нет механизма транпартировки по окнам. Но всеже, .confirm куда проще поправить под нужны. :)
    – And
    26 авг 2016 в 14:31
  • @MaximZasorin, стоит посмотреть справку по компонетам
    – Grundy
    26 авг 2016 в 15:22

2 ответа 2

1

Самое простое решение в лоб: у компонента заводим дополнительную переменную isShow: false.

<template id="template-popup-component">
  <button v-on:click="togglePopup">Toggle this popup</button>
  <div v-if="isShow" class="popup-content">
    <slot></slot>
  </div>
</template>
<popup>
  Hello, World!
</popup>
Vue.component('popup', {
   template: '#template-popup-component',
   data: function() {
     return {
       isShow: false
     }
   },
   methods: {
     togglePopup: function() {
       this.isShow = !this.isShow;
     },
   }
});

var app = new Vue({
  el: 'body',
});

Решение этой задачи на Codepen

1
  • Спасибо за помощь, но мне нужно было вызывать метод определенного компонента страницы, решил через директиву ref и объект $refs. 27 сен 2016 в 10:25
0

Всем спасибо, разобрался, компоненты на странице можно именовать также как и элементы DOM, но через директиву ref, и затем обращаться к ним через объект $refs.

<body>
    <button
        @click="$refs.popup1.open()"
    >
        open popup #1
    </button>

    <popup
        v-ref:popup-1
        inline-template
    >
        <div
            v-if="data.open"
            class="popup popup_1"
        >
                Content #1
        </div>
    </popup>

    <popup
        v-ref:popup-2
        inline-template
    >
        <div
            v-if="data.open"
            class="popup popup_2">
            Content #2
        </div>
    </popup>
</body>
...

<script>
    Vue.component('popup', {
        data: function() {
            return {
                data: {
                    open: false
                }
            }
        },
        methods: {
            open: function() {
                this.data.open = true;
            },
        }
    });

    var app = new Vue({
            el: 'body',
    });
</script>

https://jsfiddle.net/maximzasorin/g8kjn9ws/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.