在Vue.js中，组件可以检测插槽内容何时更改 [英] In Vue.js can a component detect when the slot content changes
问题描述
我们在Vue中有一个组件，它是一个缩放到窗口大小的框架，它包含（在< slot> 中）一个元素（通常< img> 或< canvas> ）。
组件在元素更改时需要作出反应。我们可以看到做这件事的唯一方法是让父母在发生这种情况时刺激组件，但是如果组件可以自动检测< slot> 元素会相应地改变并作出反应。有没有办法做到这一点？
据我所知，Vue没有提供这样做的方法。但是，这里有两种方法值得考虑。
观察插槽的DOM以进行更改
使用 MutationObserver 来检测<插槽> 更改。这不需要组件之间的通信。简单地在你的组件的挂载的回调期间设置观察者。
Vue.component（'container'，{template ：'#container'，data：function（）{return {number：0，observer：null}}，mounted：function（）{//创建观察者（以及更改操作...）this.observer =新的MutationObserver（函数（突变）{this.number ++;} .bind（this））; //设置观察者this.observer.observe（$（this。$ el）.find（'。content'）[0]， {属性：true，childList：true，characterData：true，subtree：true}）;}，beforeDestroy：function（）{//清理this.observer.disconnect（）;}}）; var app = new Vue（{ el：'#app'，dat a：{number：0}，mounted：function（）{//每隔一秒更新插槽中的元素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>我是容器，并且检测到{{number}}个更新。 < div class =content>< slot>< / slot>< / div> < / div>< / template>< div id =app> <容器>我是内容，并且已更新{{number}}次。 < /容器> < / div>
使用Emit
如果Vue组件负责更改插槽，那么最好发生事件时发生变化。这允许任何其他组件响应发出的事件，如果需要的话。
为此，请将空的Vue实例用作全局事件总线。任何组件都可以发送/监听事件总线上的事件。在你的情况下，父组件可能会发出更新内容事件，并且子组件可能会对它做出反应。
这是一个简单的例子：
//将一个空的Vue实例用作事件busvar bus =新的Vue（）Vue.component（'container'，{template：'#container'，data：function（）{return {number：0}}，methods：{increment：function（）{this.number ++;}}，创建：function（）{//监听'updated-content'事件并相应地响应总线$ on（'updated-content'，this.increment）;}，beforeDestroy：function（）{//清理总线。 $ off（'updated-content'，this.increment）;}}）; var app = new Vue（{el：'#app'，data：{number：0}，mounted：function（）{//更新元素在插槽中每秒ond，//并发出更新内容事件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>我是容器，并且检测到{{number}}个更新。 < div class =content> <插槽>< /插槽> < / DIV> < / div>< / template>< div id =app> <容器>我是内容，并且已更新{{number}}次。 < /容器> < / div>
We have a component in Vue which is a frame, scaled to the window size, which contains (in a <slot>) an element (typically <img> or <canvas>) which it scales to fit the frame and enables pan and zoom on that element.
The component needs to react when the element changes. The only way we can see to do it is for the parent to prod the component when that happens, however it would be much nicer if the component could automatically detect when the <slot> element changes and react accordingly. Is there a way to do this?
To my knowledge, Vue does not provide a way to do this. However here are two approaches worth considering.
Watching the Slot's DOM for Changes
Use a MutationObserver to detect when the DOM in the <slot> changes. This requires no communication between components. Simply set up the observer during the mounted callback of your component.
Here's a snippet showing this approach in action:
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>
Using Emit
If a Vue component is responsible for changing the slot, then it is best to emit an event when that change occurs. This allows any other component to respond to the emitted event if needed.
To do this, use an empty Vue instance as a global event bus. Any component can emit/listen to events on the event bus. In your case, the parent component could emit an "updated-content" event, and the child component could react to it.
Here is a simple example:
// 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>
这篇关于在Vue.js中，组件可以检测插槽内容何时更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
