typescript - 道具不适用于 symfony 6 vue3 SFC 和 TS

Question

在 symfony 6 / vue3 / TS 的新项目中，我无法正确制作道具。

在这个简单的页面中，从未将道具“测试”提供给组件。'test' 总是得到默认值。我还在控制台中收到警告说道具丢失了，我不知道为什么它会丢失。twig/php/symfony 似乎没有传递值...：/

我尝试了 Composition API 和 option API，但它们都遇到了同样的问题。谢谢你的帮助。

树枝文件：

    {% extends 'base.html.twig' %}

{% block title %}Et voila{% endblock %}

{% block body %}
    {% include 'menu.html.twig' %}


    <div id="client">
        <client test = "It's fine"></client>
    </div>


    {% block javascript %}
        {{ encore_entry_script_tags('client') }}

    {% endblock %}

{% endblock %}

客户端.vue：

<template>
  <div>
    Result :  {{ test }}
  </div>
</template>

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

export default defineComponent({
  name: "client",
  props: {
    test: {
     
      type: String ,
      required: true,
      default:() => ('nope !')
    },
  },
  mounted() {
    console.log(this.test)
  }
})
</script>

<style scoped>

</style>

tsconfig.json ：

    {
      "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "useDefineForClassFields": true,
    
        // Required in Vue projects
        "jsx": "preserve",
    
        "noImplicitThis": true,
        "strict": true,
    
        // Required in Vite
        "isolatedModules": true,
       
        "preserveValueImports": true,
        // Enforce using `import type` instead of `import` for types
        "importsNotUsedAsValues": "error",
   
       "target": "ESNext",
    
        // Recommended
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "skipLibCheck": true, "importHelpers": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "shim-vue.d.ts"
  ]
}

Webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/app.ts')
    .addEntry('client', './assets/appvue.ts')
    .enableStimulusBridge('./assets/controllers.json')

    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enablePostCssLoader()
     .enableTypeScriptLoader(function(tsConfig) { tsConfig.silent = false
                       })
    .enableVueLoader()


;

module.exports = Encore.getWebpackConfig();

appvue.ts：

import * as Vue from 'vue';
import client from "../vue/client/client.vue";
Vue.createApp(client).mount('#client')