VueJS - 如何将输入参数传递给单页组件答案

【问题标题】：VueJS - how pass input parameters to the single page componentVueJS - 如何将输入参数传递给单页组件
【发布时间】：2021-08-03 13:11:44
【问题描述】：

我使用Laravel，我不想从blade.php模板向单页VUEJS组件传递参数。 p>

<example-component :userName="{{ Auth::user()->name }}"></example-component >

在我的 app.js 文件中，我有一个代码：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');

import 'es6-promise/auto';

import store from './store'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#main',
    store
    }
});

这是我的 ExampleComponent.vue 的代码：

<template>
<div>
    {{userName}}
</div>
</template>

<script>
export default {
    props: ['userName'],
    data(){
        return {
            temperature: ''
        }
    },
    computed: {

    },
    methods: {
    }
}
</script>

<style>

</style>

我有错误 [Vue 警告]：编译模板时出错： 无效的表达式：

中有意外的标识符

user name

原始表达式：:username="user name"

如何从blade.php模板向单页VUEJS组件传递参数？

【问题讨论】：

标签： laravel vue.js vuejs2 vue-component vue-props

【解决方案1】：

这样

<example-component user-name="{{ Auth::user()->name }}"></example-component>

使用kebab case，因为 HTML 不区分大小写。
Remove the colon 因为您没有在执行 JavaScript 表达式

【讨论】：