我们在 Vue 中有一个组件，它是一个缩放到窗口大小的框架，它包含（在 a 中<slot>）一个元素（通常是<img>或<canvas>），它可以缩放以适应框架并启用对该元素的平移和缩放。
当元素发生变化时，组件需要做出反应。<slot>我们能看到的唯一方法是让父组件在发生这种情况时刺激组件，但是如果组件能够自动检测元素何时发生变化并做出相应反应，那就更好了。有没有办法做到这一点？
问问题
28148 次
4 回答
26
据我所知，Vue 没有提供这样做的方法。然而，这里有两种方法值得考虑。
查看 Slot 的 DOM 以了解更改
使用MutationObserver来检测 DOM 何时<slot>发生变化。这不需要组件之间的通信。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 组件负责更改插槽，那么最好 在更改发生时发出事件。这允许任何其他组件在需要时响应发出的事件。
为此，请使用一个空的 Vue 实例作为全局事件总线。任何组件都可以在事件总线上发出/监听事件。在您的情况下，父组件可能会发出“更新内容”事件，而子组件可能会对它做出反应。
这是一个简单的例子：
// 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>于 2016-07-01T20:43:53.083 回答
17
据我了解 Vue 2+，当插槽内容发生变化时，应该重新渲染组件。在我的情况下，我有一个error-message组件应该隐藏，直到它有一些插槽内容要显示。起初，我将此方法附加到v-if组件的根元素上（computed属性不起作用，Vue 似乎没有反应性this.$slots）。
checkForSlotContent() {
let checkForContent = (hasContent, node) => {
return hasContent || node.tag || (node.text && node.text.trim());
}
return this.$slots.default && this.$slots.default.reduce(checkForContent, false);
},
只要插槽中发生 99% 的更改（包括任何添加或删除 DOM 元素），这都会很好地工作。唯一的边缘情况是这样的用法：
<error-message> {{someErrorStringVariable}} </error-message>
这里只更新了一个文本节点，由于我仍然不清楚的原因，我的方法不会触发。我通过连接到beforeUpdate()andcreated()来解决这个问题，让我得到一个完整的解决方案：
<script>
export default {
data() {
return {
hasSlotContent: false,
}
},
methods: {
checkForSlotContent() {
let checkForContent = (hasContent, node) => {
return hasContent || node.tag || (node.text && node.text.trim());
}
return this.$slots.default && this.$slots.default.reduce(checkForContent, false);
},
},
beforeUpdate() {
this.hasSlotContent = this.checkForSlotContent();
},
created() {
this.hasSlotContent = this.checkForSlotContent();
}
};
</script>
于 2019-04-19T14:23:51.413 回答
1
还有另一种方法可以对插槽更改做出反应。老实说，我觉得它更干净，以防万一。对我来说，emit+event-bus 和突变观察都不正确。
采取以下场景：
<some-component>{{someVariable}}</some-component>
在这种情况下，当 someVariable 发生变化时，一些组件应该做出反应。我在这里要做的是在组件上定义一个 :key，这会在 someVariable 更改时强制它重新呈现。
<some-component :key="someVariable">Some text {{someVariable}}</some-component>
亲切的问候 Rozbeh Chiryai Sharahi
于 2021-02-05T11:20:01.017 回答