帶有組件的 Vue JS 動態模式

Question

在 news.twig 中

{% extends 'layouts.twig' %}

{% block content %}


<section class="ls section_padding_bottom_110">

  <div id="cart" class="container">

    <cart
    v-bind:materials="news"
    type="news"
    test="materials"
    ></cart>
    <modal></modal>
  </div>

  <script type="text/x-template" id="modal-template">
      <transition name="modal">
          <div class="modal-mask" v-if="active" @click="close()">
              <div class="modal-wrapper">
                  <div class="modal-container">

                      <div class="modal-header">
                          <h3>${ item.name }</h3>
                      </div>

                      <div class="modal-body">
                          ${ item.body }
                          <br>
                          modal #${ item.id }
                      </div>

                      <div class="modal-footer">
                          &nbsp;
                          <button class="modal-default-button" @click="close()">
                              close
                          </button>
                      </div>
                  </div>
              </div>
          </div>
      </transition>
  </script>

</section>

{% endblock %}

我的 js 中有 2 個組件和 1 個 Vue。

    var Hub = new Vue();
    
    Vue.component(
        'modal', {
            template: '#modal-template',
            delimiters: ['${', '}'],
            data: function() {
                return {
                    active: false,
                    item: {
                        id: '',
                        name: '',
                        body: ''
                    }
                }
            },
            methods: {
                open: function (item) {
                    this.active = true;
                    this.item = item;
                },
                close: function () {
                    this.active = false;
                }
            },
            mounted: function() {
                this.$nextTick(function () {
                    Hub.$on('open-modal', this.open);
                    Hub.$on('close-modal', this.close);
                }.bind(this));
            }
        });
Vue.component('cart', {
  props: {
    materials: { type: Array, required: true},
    type: { type: String, required: true}
  },
  computed: {
    isPoints() {
      return this.type == 'paymentPoints';
    },
    isNews() {
      return this.type == 'news';
    }
  },
  template : `
  <div class="row masonry-layout isotope_container">
    <div class="col-md-4 col-sm-6 isotope-item" v-for="item in materials">
      <div class="vertical-item content-padding topmargin_80">
        <div class="item-media">
          <img v-bind:src="item.image" alt="">
          <div class="media-links p-link">
            <div class="links-wrap">
              <i class="flaticon-arrows-2"></i>
            </div>
            <a v-if="!isNews" v-bind:href="item.image" class="abs-link"></a>
          </div>
        </div>
        <button @click="openModal(item)" @keyup.esc="closeModal()">more</button>

        <div class="item-content with_shadow with_bottom_border">
          <span v-if="isNews" class="categories-links" style="font-size:20px;">
            <a rel="category" href="#modal1" data-toggle="modal">
              {{item.name}}
            </a>
          </span>
          <p>{{item.body}}</p>
          <div v-if="isPoints">
            <hr class="light-divider full-content-divider bottommargin_10">
            <div class="media small-icon-media topmargin_5">
              <div class="media-left">
                <i class="fa fa-map-marker grey fontsize_18"></i>
              </div>
              <div class="media-body">
                {{item.adress}}
              </div>
            </div>
            <div class="media small-icon-media topmargin_5">
              <div class="media-left">
                <i class="fa fa-phone grey fontsize_18"></i>
              </div>
              <div class="media-body">
                {{item.telephone}}
              </div>
            </div>
          </div>
          <div v-if="isNews" class="text-center">
          <hr class="light-divider full-content-divider bottommargin_10">
          <span class="date">
            <i class="flaticon-clock-1 grey"></i>
            <time class="entry-date">
              {{item.date}}
            </time>
          </span>
          </div>
        </div>
      </div>
    </div>

  </div>
  `
});

var vm = new Vue({
  el: '#cart',
  name: 'cart',
  delimiters: ['${', '}'],
  data: {
    complated: [],
    continuing: [],
    planned: [],
    points: [],
    infoSlider: [],
    news: []
    },
    methods: {
      openModal: function (item) {
        Hub.$emit('open-modal', item);
      },
      closeModal: function () {
        Hub.$emit('close-modal');
      }
    },
    created() {
      axios.get(url).then(res => {
        var proje = res.data.projects[0];
        this.complated = proje.complated;
        this.continuing = proje.continuing;
        this.planned = proje.planned;
        this.points = res.data.paymentPoints;
        this.infoSlider = res.data.sliderİnfos;
        this.news = res.data.news;
      })
      .catch(e => {
        console.log(e);
      })
    }
  });

當我點擊openModal(item)按鈕給我錯誤；

屬性或方法“openModal”未在實例上定義，但在渲染期間被引用。 通過初始化該屬性，確保該屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。 請參閱： https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我無法在組件中使用 openModal 功能。 我可以毫無問題地使用 news.twig 中的功能，但是我不能使用該組件。 你能幫助我嗎？

Answer 1

您在購物車組件中使用 openModal，但該方法是在根組件中定義的。 根據Vue 的文檔：

父模板中的所有內容都在父范圍內編譯； 子模板中的所有內容都在子范圍內編譯。

Answer 2

在我的情況下需要在 vuejs 中定義變量

像這樣

<script>
    export default {
        name: "MegaMenu",
        props: {
          categories: Array,
        },
    }