Laravel VueJS-如何将输入参数传递到单页组件

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

在我的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
    }
});

这是我的示例组件的代码。vue：

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

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

    },
    methods: {
    }
}
</script>

<style>

</style>

原始表达式：：username=“user name”

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

如下所示

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

使用，因为HTML不区分大小写。
因为您没有执行JavaScript表达式

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