使用createElement和render函数从.blade.php文件传递道具到值实例

Question

---

编辑:更多信息:

我有一个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应用程序使用vue-cli。

所以，是我的主应用程序缺少一个模块，是无法得到的道具?还是有其他的方式来表达"理解"?

再次感谢。

---

在过去，我使用以下代码来创建应用程序实例:

// const mainpage_inst=new Vue({
//   el: '#main-page',
//   components: {
//     MainPage,
//   },
//   props: ['data'],
// });

和我调用MainPage组件从.blade.php文件通过传递props:

<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}} &#8212;  </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>

Answer 1

Vue 3中的一个重大变化是全局Vue API被更改为使用应用程序实例。要创建一个vue应用，使用createApp函数创建实例。

a-new-global-api-createapp

渲染函数没有提供渲染函数(h)，所以需要导入它。文档

那么你的实例化应该看起来像这样:

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')