Vue 3中如何通过自定义指令修改或新增组件的props与data值

Vue3 自定义指令修改组件状态的可行方案 #

原写法失效原因 #

直接修改$options.$data是无效的，该对象是组件初始化阶段的配置快照，不是运行时的响应式状态，修改后不会同步到组件实例，也无法触发视图更新。

具体实现方案 #

前置注意事项

• 组件的props为只读属性，不允许直接修改，强制修改会触发运行时警告。需要调整props时可通过触发emit事件通知父层更新数据源。
• 如果指令绑定的是<script setup>语法的组件，需要修改的属性必须在组件内部通过defineExpose主动暴露，否则指令无法访问对应属性。

1. 修改已存在的响应式属性

如果目标属性已经在组件内部声明为data/setup响应式状态，可直接通过组件实例代理修改：

export const renderDirective = {
  created(el, _, vnode) {  
    // 获取组件公开实例代理
    const componentInst = vnode.component?.proxy
    if (!componentInst) return
    // 直接修改已声明的响应式属性
    componentInst.someValue = 'Some Value'
  }
}

2. 给组件新增响应式属性

如果要新增组件原本未声明的响应式属性，需要使用Vue提供的set方法保证属性的响应式：

import { set } from 'vue'

export const renderDirective = {
  created(el, _, vnode) {  
    const componentInst = vnode.component?.proxy
    if (!componentInst) return
    // 给实例新增响应式属性
    set(componentInst, 'someNewValue', 'Some Value')
  }
}

3. 调整props值的替代方案

如果需要修改组件props，可触发组件的emit事件，父层配合v-model绑定即可实现props更新：

export const renderDirective = {
  created(el, _, vnode) {  
    const componentInst = vnode.component?.proxy
    if (!componentInst) return
    // 触发更新事件，父层用v-model:someProp绑定即可同步更新props
    componentInst.$emit('update:someProp', 'New Prop Value')
  }
}

内容的提问来源于stack exchange，提问作者calebeaires