Vue3组件方法无法更新prop属性，请求排查问题

核心错误点 #

• Props单向数据流限制：子组件不能直接修改props值，你通过$emit触发事件后，必须由父组件监听该事件并更新传递给子组件的myprop，子组件自身的myprop才会变化。
• model选项事件名冲突：你把model.event设为click，会和按钮的原生点击事件冲突，不符合Vue的双向绑定规范。
• 异步更新未等待：$emit后父组件更新props是异步操作，立即console.log只能拿到旧值（初始未传值就是undefined）。
• 未设置props默认值：myprop没有默认值，父组件未传值时会显示undefined。

修复后的子组件代码 #

<template>
  <div class="hello">
    <div>
      My prop: {{ myprop }}?
    </div>
    <div>
      <button class="fas fa-lock-open lock" @click="changeText()">Click</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'StartPage',
  props: {
    myprop: {
      type: String,
      default: '' // 添加默认值避免undefined显示
    }
  },
  // 修正model配置，使用Vue规范的更新事件名
  model: {
    prop: 'myprop',
    event: 'update:myprop'
  },
  methods: {
    changeText () {
      this.$emit('update:myprop', 'sometext')
      // 等待父组件更新props后再打印
      this.$nextTick(() => {
        console.log('this.myprop', this.myprop)
      })
    }
  }
})
</script>

父组件使用示例 #

必须在父组件中通过v-model绑定数据，或者手动监听事件更新：

<template>
  <StartPage v-model="parentValue" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import StartPage from './StartPage.vue'

export default defineComponent({
  components: { StartPage },
  setup() {
    const parentValue = ref('')
    return { parentValue }
  }
})
</script>

补充说明 #

• 使用v-model时，Vue会自动监听update:myprop事件并更新父组件的parentValue，进而同步到子组件的myprop。
• 如果不想用model选项，也可以直接在父组件中手动监听事件：

  <StartPage :myprop="parentValue" @update:myprop="parentValue = $event" />
  

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