如何监事组件的v-show变化？

[weixin_38060792]

需求是组件show状态下运行会一些常驻程序，但是unshow的时候就不需要运行了。 现在的实现方式是给组件加active属性，然后让父组件改变active值再由active值传递v-show。 但是我觉得这样的实现方式太挫了！查了一圈网上也没有这个资料，官网也没有v-show的钩子。。。 那么有没有什么更优雅的方案呢？ 举个例子： ParentComponent.vue: div sub-component(v-show=“prop”) prop是parent-component这个组件私有的，sub-component是不知道的，当prop变化的时候，怎么让sub-component知道自己show状态变化了呢？

[weixin_38099114]

上面有个地方说错了，不是用active传递vshow，是组件通过监视active来监视自己有没有被show。。。

[weixin_38062545]

watch一下show的状态试一试

[weixin_38085230]

试试 v-if ？

[weixin_38090274]

watch show的状态是指我的active方法还是有针对show的语法？

[weixin_38138286]

有的组件是不希望频繁被dom的

[weixin_38104763]

针对show的组件吧

[weixin_38099229]

可以把 v-show 的 prop 传入到子组件鸭…… 子组件去 监听 这个 prop的变化不可以么？

[weixin_38108998]

这样就变成了我所说的： sub-component(v-show=“prop”, :active=“prop”) 这样太挫了！

[weixin_38063619]

/* 子组件（被 v-show 的组件） */ { created () { // 找到父组件用来控制 v-show 的状态 // 需要注意的是 `expression` 不一定是个单纯的状态/变量名，本例简化处理，实际要做更复杂的判断 const showProp = this.$vnode.data.directives.find(d => d.name === 'show').expression // 监听父组件的状态变化 this.$watch( () => this.$parent[showProp], val => { // `val` 就是最终的布尔值了 /* ... */ }, ) }, } 不过并不建议这么做。如果子组件的显隐会影响它的行为，那么这个显隐状态就应当是子组件可直接访问的一个逻辑状态。让父组件不要通过 v-show 而是子组件的一个 prop（比如 visible）来传递这个显隐状态是一个常见的做法。

[weixin_38098251]

这个算是某种hack的方法了吧。这个方法只能监听prop，如果控制v-show的是一个函数，或者是一个别的对象的属性，就不行了。

[weixin_38108829]

其实可以，这也是我在 vm.$watch() 的第一个参数上使用函数形式的原因。只要你能在这个函数里仿照 Vue 环境执行表达式并返回明确的布尔值，响应式更新就能生效。前提是，你得能仿照这个执行环境，很有可能需要你解析那个 expression。

[weixin_38122182]

v-model 双向绑定