在调用的方法上渲染组件模板

Question

所以在我学习 vue 时，我想仔细检查是否有人可以告诉我我做错了什么或引导我找到正确的答案。下面，我将展示代码，然后解释我正在尝试做的事情。

这是我的Vue.js 应用程序：

Vue.component('o365_apps_notifications', {
    template:
    `
    <div class="notification is-success is-light">
        // Call the name here and if added/removed.
    </div>
   `,

});

new Vue({
    name: 'o365-edit-modal',
    el: '#o365-modal-edit',
    components: 'o365_apps_notifications',
    data() {
        return {
            list: {},
            movable: true,
            editable: true,
            isDragging: false,
            delayedDragging: false,
            options: {
                group: 'o365apps',
                disabled: true,
                handle: '.o365_app_handle',
            }
        }
    },
    methods: {
        add(index, obj) {
            console.log(obj.name);
            this.$data.list.selected.push(...this.$data.list.available.splice(index, 1));
            this.changed();
        },
        remove(index, obj) {
            console.log(obj.name);
            this.$data.list.available.push(...this.$data.list.selected.splice(index, 1));
            this.changed();
        },
        checkMove(evt) {
            console.log(evt.draggedContext.element.name);
        },
    },
});

这是我的模态：

<div id="o365-modal-edit" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card px-4">
        <header class="modal-card-head">
            <p class="modal-card-title">Applications</p>
            <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="container">
                <div id="o365-modal-edit-wrapper">
                    <div class="columns">
                        <div class="column is-half-desktop is-full-mobile buttons">
                            // Empty
                        </div>
                        <div class="column is-half-desktop is-full-mobile buttons">
                            // Empty
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <o365-apps-notifications></o365-apps-notifications>
        </footer>
    </div>
</div>

---

这是我正在尝试做的事情：

在我的模式中，我调用了我的o365_apps_notifications html 标记，我的add() 和remove() 方法使用console.log(obj.name); 在每次添加/删除时输出一个名称，我的checkMove 方法也将相同的名称拖到如下图拖动：

1. 如何让我的组件在模态页脚中呈现和输出名称？我已经尝试了所有方法，但我似乎无法弄清楚如何触发组件。

2. 另外，我是否必须做一些特别的事情才能使组件在设定的时间范围后淡出？

感谢所有帮助！

Answer 1

几个问题：

1. 您已使用下划线 (o365_apps_notifications) 声明了通知组件，但在模态模板中使用了连字符。它们应该是一致的（约定是连字符）。

2. 通知组件是全局声明的（使用Vue.component），但看起来您正在尝试将其添加到模式的components，它是为本地组件设计的。只需要一个注册（全局组件注册应该做）。

<o365-apps-notifications>

通知组件应该有public props 获取项目名称和状态：

Vue.component('o365-apps-notifications', {
  props: {
    item: String,
    isAdded: Boolean
  },
})

然后，它的模板可以使用数据绑定来显示这些道具。

Vue.component('o365-apps-notifications', {
  template:
   `<div>
      {{ item }} {{ isAdded ? 'added' : 'removed '}}
    </div>`
})

对于淡入淡出过渡，我们希望 conditionally render 这个数据基于本地布尔值 data property（例如，命名为 show）：

Vue.component('o365-apps-notifications', {
  template:
   `<div v-if="show">
      ...
    </div>`,
  data() {
    return {
      show: false
    }
  }
})

...并添加 <transition> element 和 CSS 以设置淡入淡出的样式：

Vue.component('o365-apps-notifications', {
  template:
   `<transition name="fade">
      <div v-if="show">
        ...
      </div>
    </transition>`,
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

要自动淡出数据，请在item 上添加watch，它会设置show=true，然后在延迟后设置show=false：

Vue.component('o365-apps-notifications', {
  watch: {
    item(item) {
      if (!item) {
        return;
      }
      this.show = true;

      clearTimeout(this._timer);
      this._timer = setTimeout(() => this.show = false, 1000);
    }
  }
})

用法

在模态组件中，声明保存当前添加/删除项的本地数据属性：

new Vue({
  el: '#o365-modal-edit',
  data() {
    return {
      changedItem: null,
      changedItemIsAdded: false,
    }
  },
})

同时更新add() 和remove() 以设置这些属性：

new Vue({
  methods: {
    add(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = true;
    },
    remove(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = false;
    },
  },
})

然后在modal组件的模板中，将这些属性绑定到通知组件的props：

<o365-apps-notifications :item="changedItem" :is-added="changedItemIsAdded"></o365-apps-notifications>

demo