Vue父组件向子组件传递数据或触发事件不生效问题求助

核心问题点 #

• Prop传递值错误：父组件绑定的update是未执行的方法本身，传递到子组件的是函数对象，而非你预期的enableEdit返回值
• 子组件未注册Prop：你子组件中声明的editField = ''是子组件本地私有变量，没有注册为Prop，父组件传递的属性无法被正常接收
• 逻辑匹配误差：子组件showField方法中判断this.editField == url，如果你传递的是固定值enableEdit，需要确认该值和url变量的值匹配，否则判断条件不会触发

修复方案 #

方案1：修复Prop传值流程（符合Vue单向数据流规则）

1. 父组件模板修改，执行update方法拿到返回值再传递

<team-url :editField="update()"></team-url>

2. 子组件注册Prop，删除本地的editField私有变量声明：
   Vue2示例：

export default {
  props: {
    editField: {
      type: String,
      default: ''
    }
  },
  methods: {
    showField(url: string): boolean {
      // 如果你需要editField为enableEdit时直接返回true，可修改判断逻辑
      return (this.url[url] == '' || this.editField === 'enableEdit' || this.editField == url)
    }
  }
}

Vue3 <script setup>示例：

<script setup lang="ts">
const props = defineProps<{
  editField: string
}>()

const showField = (url: string): boolean => {
  return (url[url] == '' || props.editField === 'enableEdit' || props.editField == url)
}
</script>

方案2：父组件直接触发子组件方法

如果只是需要单次触发子组件逻辑，不需要持续传值，可以通过ref调用子组件方法：

1. 父组件给子组件标签添加ref属性

<team-url ref="teamUrlRef"></team-url>

2. 父组件需要触发时调用子组件暴露的方法
   Vue2示例：

// 父组件逻辑中调用
this.$refs.teamUrlRef.setEditStatus('enableEdit')

Vue3 <script setup>示例：

<script setup lang="ts">
const teamUrlRef = ref()

// 触发时调用
teamUrlRef.value?.setEditStatus('enableEdit')
</script>

3. 子组件封装对应方法并暴露（Vue3需要主动用defineExpose暴露）
   Vue3子组件示例：

<script setup lang="ts">
const editField = ref('')
const setEditStatus = (status: string) => {
  editField.value = status
}
// 暴露方法给父组件调用
defineExpose({
  setEditStatus
})
</script>

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