Javascript 在Vue.js中，组件能否检测插槽内容何时更改

我们在Vue中有一个组件，它是一个按窗口大小缩放的框架，其中包含（在

中）一个元素（通常是

或

），它可以根据框架进行缩放，并可以对该元素进行平移和缩放

---

当元素发生变化时，组件需要作出反应。我们可以看到的唯一方法是，当发生这种情况时，父级可以刺激组件，但是如果组件能够自动检测

元素的变化并做出相应的反应，那就更好了。有办法做到这一点吗

据我所知，Vue没有提供一种方法来实现这一点。然而，这里有两种方法值得考虑

查看插槽的DOM以了解更改 使用a来检测

中的DOM何时更改。这不需要组件之间的通信。只需在组件的

挂载

回调期间设置观察者

下面是一个片段，展示了这种方法的实际应用：

Vue.component（'container'{
模板：“#容器”，
数据：函数（）{
返回{number:0，observer:null}
},
挂载：函数（）{
//创建观察者（以及如何处理更改…）
this.observer=新的突变观察者（函数（突变）{
这个.number++；
}.约束（这个）；
//设置观察者
观察者，观察者(
$（this.$el）.find（'.content'）[0]，
{attributes:true，childList:true，characterData:true，子树：true}
);
},
beforeDestroy:function（）{
//清理
this.observer.disconnect（）；
}
});
var app=新的Vue({
el:“#应用程序”，
数据：{number:0}，
挂载：函数（）{
//每秒更新插槽中的元素
setInterval（函数（）{this.number++；}.bind（this），1000）；
}
});
.content、.container{
保证金：5px；
边框：1px纯黑；
}

我是容器，我检测到了{number}更新。
我是内容，我已经更新了{{number}}次。
 > p>我建议你考虑一下这个窍门：我过去经常观察变化，并且用时隙内容做任何事情。

受VIcon组件工作原理的启发，我们的想法是使用一个功能组件，我们在其
render
函数中实现逻辑。
context
对象作为
render
函数的第二个参数传递。特别是，
context
对象有一个
data
属性（您可以在其中找到属性，
attrs
），以及一个与插槽相对应的
children
属性（您可以使用相同的结果调用
context.slot（）
函数）

致以最诚挚的问候
据我所知，当插槽内容发生变化时，应重新呈现组件。在我的例子中，我有一个
错误消息
组件，它应该隐藏起来，直到有一些插槽内容显示。起初，我将此方法附加到组件根元素上的
v-if
（计算的
属性不起作用，Vue似乎对此没有反应。$slots
）

只要槽中发生99%的更改，包括添加或删除DOM元素，这种方法就可以很好地工作。唯一的边缘情况是这样使用：

<error-message> {{someErrorStringVariable}} </error-message>

还有另一种方法可以对插槽更改做出反应。我觉得老实说要干净得多，以防万一。在我看来，emit+事件总线和突变观测都不正确

以下面的场景为例：

<some-component>{{someVariable}}</some-component>

{{someVariable}

在这种情况下，当某个变量发生变化时，某个组件应该做出反应。我在这里要做的是在组件上定义一个：键，当某个变量发生变化时，它会强制组件重新运行

<some-component :key="someVariable">Some text {{someVariable}}</some-component>

sometext{{someVariable}

亲切的问候
Rozbeh Chiryai Sharahi
对于第一个，Domsubtreedimodified？对于第二个，类似地，Vue 2.0（我们计划在稳定后过渡到Vue 2.0）中也有一个不推荐广播事件的计划，尽管这不会阻止事件直接发送到组件上。很好的捕获。我已将答案更新为使用
mutationobserver
和
$emit
@pqvst。您是对的。旧答案是为Vue 1.0编写的，它使用了
ready
而不是
mounted
。我已经编辑了答案，改为使用
挂载的
。VueJS是否仍然不提供将监视程序绑定到
$slots的功能。默认值
？这个复杂的Observer cruft仍然是必需的吗？在我看来，您正在制作一些依赖于内容的东西-在本例中，如果插槽内容是“foo”或“bar”，则显示为1或2。我们所需要的是稍微不同的-对更改的图形元素、
img
标记或
canvas
元素做出反应。我们需要在情况发生变化时做一些事情，而不是依赖于内容。要做到这一点，您需要在html上创建一个内容监视机制。对我们来说，我认为上述选择可能更简单。不过，感谢您的想法并努力分享代码。很好，很简单，只要您还可以控制组件的使用位置和方式，如果这是可能的话。因为这不是一种常规的使用模式，所以对于组件的使用者来说可能是意外的。我们有一些更像
，所以您使用的模式不起作用。我理解。在给定的情况下，
将是一个呈现组件，如
MyView.vue
。如果可能的话，您应该更喜欢在
MyView.vue
中发出事件并对父级做出反应。示例：
。虽然，我完全理解，在一些复杂的情况下，比如你的情况，没有办法绕过像EventBus或MutationObserver这样的锤子，只是把这个放在这里，对于那些比较容易的情况。很好的解决方案，谢谢。您是否建议添加此功能
<some-component>{{someVariable}}</some-component>

<some-component :key="someVariable">Some text {{someVariable}}</some-component>