Vuejs3 道具从 laravel blade 到 vue 组件未定义

Question

这里是 blade 文件

@extends('layouts.master')
@section('content')
<div id="app">     
  <demo test="fsdf"></demo>  
</div>
<script src="{{asset('js/app.js')}}"></script>
@endsection

这里是 app.js 文件

import {createApp} from 'vue';
import Demo from './components/Demo.vue';

const vue3App = createApp(Demo);
vue3App.mount('#app');

这里是 Demo.vue 文件

<template>
<h1>Demo</h1>
</template>
<script>
export default {
    props: ['test'],
    setup(props) {
        console.log(props);
    }
}
</script>

演示组件中的道具总是显示未定义！。不知道我错过了什么。我还使用 6.0.34 的 laravel-mix。

Answer 1

它是未定义的，因为你必须先注册组件

    import {createApp} from 'vue';
    import Demo from './components/Demo.vue';
    
    const app = createApp({
       mounted() {
          console.log('The app is working')
       }
    });
    app.component('demo', Demo); //global registration
    app.mount('#app');

Vuejs3 道具从 laravel blade 到 vue 组件未定义

Vuejs3 props getting undefined from laravel blade to vue component

vuejs3

laravel-8

laravel-mix-vue3