在laravel和vue上未定义的道具

<example-component :user-name="userName"></example-component>

<script>
export default {
props: ['userName'],
// ...
}
</script>

<script>
export default {
props: {
userName: String,
age: Number
},
// ...
}
</script>

<example-component :user-name="userName" :age="userAge"></example-component>

<script>
export default {
props: {
userName: {
type: String,
required: true
},
age: {
type: Number,
default: 0
}
},
// ...
}
</script>

<!-- resources/views/parent-component.blade.php -->
<example-component :user-name="userName"></example-component>

// resources/js/components/ParentComponent.vue
<template>
<div>
<child-component :user-name="userName"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
userName: 'John Doe'
};
}
};
</script>

// resources/js/components/ChildComponent.vue
<template>
<div>
{{ userName }}
</div>
</template>

<script>
export default {
props: ['userName']
};
</script>