javascript - 在 Vue.js 中，组件可以检测插槽内容何时更改

Question

我们在 Vue 中有一个组件，它是一个框架，缩放到窗口大小，它包含(在 <slot> 中)一个元素(通常是 <img> 或 <canvas>)，它缩放以适合框架并启用平移和缩放该元素。

组件需要在元素改变时使用react。我们能看到的唯一方法是让父组件在发生这种情况时触发组件，但是如果组件能够自动检测何时 <slot> 会更好。元素变化并做出相应 react 。有没有办法做到这一点？

Answer 1

据我所知，Vue 没有提供这样做的方法。但是，这里有两种方法值得考虑。

观察槽的 DOM 变化

使用 MutationObserver检测 <slot> 中的 DOM变化。这不需要组件之间的通信。只需在 mounted 期间设置观察者组件的回调。

这里有一个片段展示了这种方法的实际应用:

Vue.component('container', {
  template: '#container',
  
  data: function() {
    return { number: 0, observer: null }
  },
  
  mounted: function() {
    // Create the observer (and what to do on changes...)
    this.observer = new MutationObserver(function(mutations) {
      this.number++;
    }.bind(this));
    
    // Setup the observer
    this.observer.observe(
      $(this.$el).find('.content')[0],
      { attributes: true, childList: true, characterData: true, subtree: true }
    );
  },
  
  beforeDestroy: function() {
    // Clean up
    this.observer.disconnect();
  }
});

var app = new Vue({
  el: '#app',

  data: { number: 0 },
  
  mounted: function() {
    //Update the element in the slot every second
    setInterval(function(){ this.number++; }.bind(this), 1000);
  }
});

.content, .container {
  margin: 5px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<template id="container">
  <div class="container">
    I am the container, and I have detected {{ number }} updates.
    <div class="content"><slot></slot></div>
  </div>
</template>

<div id="app">
  
  <container>
    I am the content, and I have been updated {{ number }} times.
  </container>
  
</div>

使用发射

如果一个Vue组件负责改变slot，那么最好emit an event当这种变化发生时。这允许任何其他组件在需要时响应发出的事件。

为此，使用一个空的 Vue 实例作为全局事件总线。任何组件都可以发出/监听事件总线上的事件。在您的情况下，父组件可以发出“更新内容”事件，子组件可以对此使用react。

这是一个简单的例子:

// Use an empty Vue instance as an event bus
var bus = new Vue()

Vue.component('container', {
  template: '#container',

  data: function() {
    return { number: 0 }
  },

  methods: {
    increment: function() { this.number++; }
  },
  
  created: function() {
    // listen for the 'updated-content' event and react accordingly
    bus.$on('updated-content', this.increment);
  },
  
  beforeDestroy: function() {
    // Clean up
    bus.$off('updated-content', this.increment);
  }
});

var app = new Vue({
  el: '#app',

  data: { number: 0 },

  mounted: function() {
    //Update the element in the slot every second, 
    //  and emit an "updated-content" event
    setInterval(function(){ 
      this.number++;
      bus.$emit('updated-content');
    }.bind(this), 1000);
  }
});

.content, .container {
  margin: 5px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<template id="container">
  <div class="container">
    I am the container, and I have detected {{ number }} updates.
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<div id="app">

  <container>
    I am the content, and I have been updated {{ number }} times.
  </container>
  
</div>