使用 createElement 和 render 函数将道具从 .blade.php 文件传递​​给 vue 实例

如何解决使用 createElement 和 render 函数将道具从 .blade.php 文件传递​​给 vue 实例

---

编辑：更多信息：

我有一个 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}} &#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>

解决方法

Vue 3 中的一项重大更改是 Global Vue API 已更改为使用应用程序实例。要创建 vue 应用，请使用 createApp 函数创建实例。

a-new-global-api-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')