vue 自定义指令怎么能修改组件props

Question

直接改会vn会警告，部分组件不会生效

在这里如何修改props

Answer 1

找到办法了
vnode.child.xxx
这样可以修改，虽然有警告
需要注意生命周期和请求返回
之前没有注意请求返回后赋值，导致部分能修改部分不能
自定义指令update里面处理就行

Answer 2

撇开乱七八糟的不谈，自定义指令是针对需要操作DOM的场景，官方文档中说明是这样的：

注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

而对于指令钩子的实际参数，el，binding，vnode之类的，也有特别说明：

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

如果非要在指令中依赖修改vnode来尝试达到变更props的目的，那么总存在一种情况，父组件向子组件传递的数据会因为在指令中的修改，而变得无法追踪。再回到你截图中给到的提示：避免直接修改prop，因为父组件会在重新渲染时覆盖掉你改的值。
不确定你的具体需求是什么，但总有一种方式可以朴素的实现，而不是通过一种可能存在bug的操作甚至是有些危险的操作。
只是作为一种提示，不作为问题的回答。

Answer 3

[2022-02-14] 补充

自定义指令的钩子函数参数中有说明

• el 是 HTMLElement
• binding 是指令属性和计算出来的结果
• vnode 是 Virtual Node

看起来只能从 vnode 中着手去找你需要的东西。不过根据文档中的链接跳转最终指向了 VNode 的源码

从源码中可以看到 VNode 有两个属性可能跟 Props 相关

• componentOptions: VNodeComponentOptions | void
• componentInstance: Component | void

查源码可以查到前者有 propsData?: object 属性，后者除了这个属性外，还有 props?: PropsDef 属性。propsData 和 props 应该就是数据和定义的区别，你想解决的问题很大概率要落到这两个属性上去。

剩下的没有文档支持，查看源码也会比较花时间，不如自己去做做实验吧。

---

Vue 的 props 是单向传递，所谓的双向是「单向传入」和「事件输出」的语法糖。输出是通过触发 update:propName 事件来实现的。为了快捷使用，可以使用计算属性来实现，比如下面的 title 属性和对应的 theTitle 访问器：

{
    props: ["title"],
    computed: {
        theTitle: {
            get() { return this.title; }
            set(value) { this.emit("update:title", value); }
        }
    }
}

---

• 参阅：自定义组件的 v-model
• 和接下来的 .sync 修饰符