使用导入标签Vue3在本地组件vue3.js中为未定义的props输入数据，单独页面需要Vue3

Question

use-noms-cpnt

组件如下：

<div id="app">
 <use-noms-cpnt></use-noms-cpnt>
</div>

我有一个像这样的

App component

和

App mounted

，我在网格上放置了一个道具来检索组件中的网格数据并对其进行排序，我的目标是

to pass a checked value to my input radios

：

const useNomsCpnt = {
    data(){
        return {
            useNoms: "",
        }
    },
    mounted(){
        this.useNomsFct(grille);
    },
    methods: {
        useNomsFct(grille){
                if(grille.useNoms==="non"){
                    this.useNoms="non";
                    console.log(this.useNoms);
                } else {
                    this.useNoms="oui";
                    console.log(this.useNoms);
                }
                console.log(this.grille);
            return this.useNoms;
        },
    },
    props:['grille'],
    template: '<p><label for="useNoms">Oui</label>&nbsp;&nbsp;<input type="radio" name="useNoms" value="oui" v-model="useNoms"/></p><p><label for="useNoms">Non</label>&nbsp;&nbsp;<input type="radio" name="useNoms" value="non" v-model="useNoms"/></p>',
};
const app = Vue.createApp({
    components:{
        'use-noms-cpnt': useNomsCpnt,
    },
    data(){
        return {
            grille:"",
            errored: false
        }
    },
    mounted(){
        this.fetchData();
    },
    methods: {
        async fetchData(){
            await axios.get("API_URL")
            .then(function (response) {
                // handle success
                this.grille = response.data;
                //this.grille = JSON.stringify(response.data);
            })
            .catch(function (error) {
                // handle error
                console.log(error);
                this.errored = true;
                this.grille='{"error":"error API"}';
            //})
            //.finally(function () {
            // always executed
            });
            return this.grille;
        },
    },
});
app.mount('#app');

对于

data

，

the useNoms key

看起来像这样：

    grille: {
       useNoms:"non",
       ...
    }

有件事让我很惊讶，如何定义所有组件通用的数据？ 控制台给出：

vue.global.js:1861 Uncaught ReferenceError: grille is not defined
    at Proxy.mounted line ...

对于组件声明中的行 (

this.useNomsFct(grille)

)：

mounted(){
        this.useNomsFct(grille); 
...

Answer 1

谢谢 yoduh，我将 props 的名称绑定到元素上，如下所示：

<use-noms-cpnt :grille="grille"></use-noms-cpnt>

现在我将

this.grille

传递给函数

useNomsFct()

但在控制台中

console.log(grille)

return empty

属性...