问题描述
编辑:更多信息:
我有一个 main-page.blade.PHP 文件,内容如下:
//main-page.blade.PHP where vue instance will mount
<div id="main-page" class=" bg-uoi-green">
<main-page :data=['one'] ></main-page>
</div>
还有一个main.js文件导入Vue的app.js文件,这里定义了main-page的实例(我已经安装了vue-loader和模板编译器)。
Vue 的 app.js 是:
//app.js of Vue
import Vue from 'vue'
import './assets/tailwind.css'
//
// import MainPage from './components/MainPage.vue'
// const mainpage_inst=new Vue({
// el: '#main-page',// components: {
// MainPage,// },// props: ['data'],// });
Vue.config.productionTip = false
export default {
mainpage_inst,}
为我的应用程序编译正是为我提供了所需的东西。但是,如果我还尝试使用 vue 客户端检查 Vue 目录,则会得到一个空页面;这是意料之中的,因为 vue-cli 不使用完整构建。但即使我改变了
// import Vue from 'vue'
到
import Vue from 'vue/dist/vue.js';
从 vue-cli 访问 localhost:8080 时出现空白页面。
我能够通过使用 vue 的渲染功能修复它。所以现在,实例变成了:
import MainPage from './components/MainPage.vue'
// Main page instance
const mainpage_inst = new Vue({
render: h => h(MainPage),}).$mount('#main-page')
但是,无论我如何像以前一样尝试传递 props,我的主应用程序都看不到它们,与之前的编写相反,它可以,但是 vue-cli 生成了一个空白页面。
澄清:我在另一个应用程序中有一个 Vue 应用程序,它加载了所有必需的(我认为)模块来读取和编译 .vue 文件。但我也希望能够使用 vue-cli 运行 Vue-app。
那么,我的主应用程序是否缺少模块并且无法获取道具?或者有什么其他方法可以让“理解”?
再次感谢。
过去,我使用以下代码创建应用程序实例:
// const mainpage_inst=new Vue({
// el: '#main-page',// });
我通过传递道具从 .blade.PHP 文件调用 MainPage 组件:
<main-page :data=" {{ $data_to_send_as_props }}" > </main-page>
现在我想使用以下代码:
import MainPage from './components/MainPage.vue'
// Main page instance
const mainpage_inst = new Vue({
render: h => h(MainPage),}).$mount('#main-page')
但是如果我尝试像以前一样定义道具,应用程序将无法识别它们。编写上述代码摘录的正确方法是什么,以便传递道具? 换句话说,我应该如何以及应该如何在上面的实例中添加 props 定义(还要注意,我还应该实现 Daniel 的回答中提到的更改)
编辑:
这是 MainPage.vue 组件的简化版本
<template>
<div class=" h-screen w-screen md:text-2xl text:2xl " id="main-page ">
<div class=" flex flex-shrink text-4xl md:text-9xl font-bold md:ml-20 md:my-5 md:py-0 py-10 title">
A Title
</div>
<div class="flex flex-col flex-grow h-1/3 ">
<div v-for="(item,index) in slicedArray " v-bind:key="item.id" >
<div class=" flex flex-col md:flex-row md:flex-grow w-full hover:bg-uoi-green px-10 border-black border-2 transition duration-500 cursor-pointer ease-in-out bg-opacity-70 transform hover:bg-opacity-95" :class="{active: isActive === item.id}">
<div class=" date-font h-full w-1/6 md:flex-grow px-2 py-4"> {{item.date}} — </div>
<div class=" h-full w-2/3 md:flex-grow px-2 py-4 text-left"> {{item.title}} </div>
<div class=" date-font h-full w-1/6 md:flex-grow px-2 py-4 text-right"> {{item.exp_date}} </div>
</div>
<div class=" bg-white py-10 px-20" v-if="isActive === item.id">
<div > {{item.text}} </div>
<div class='file'> <a href=''> Σχετικό αρχείο </a>
<!-- <img src="../assets/curved-up-arrow-.png" class="arrow"/> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'MainPage',props: ['data'],data(){
return{
isActive: null,newsToShow: 3,totalnews: 0,array:[],slicedArray:[],}
},mounted(){
this.newsToShow=3;
this.array=this.data;
this.totalnews = this.array.length;
// console.log(this.array)
this.slicedArray=this.array.slice(0,this.newsToShow)
},}
</script>
<style scoped>
</style>
解决方法
Vue 3 中的一项重大更改是 Global Vue API 已更改为使用应用程序实例。要创建 vue 应用,请使用 createApp
函数创建实例。
render 函数(h
)不是render 函数提供的,需要导入。 docs
所以你的实例应该是这样的:
import { h,createApp } from 'vue'
import MainPage from './components/MainPage.vue'
// Main page instance
const mainpage_inst = new createApp({
render: () => h(MainPage),}).$mount('#main-page')