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

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

但是，无论我如何尝试像以前一样传递道具，我的主应用程序都看不到它们，这与之前的写作相反，但是 vue-cli 正在生成一个空白页面。

澄清一下：我在一个不同的应用程序中有一个 Vue 应用程序，它加载了所有必需的（我认为）模块来读取和编译 .vue 文件。但我也希望能够使用 vue-cli 运行 Vue-app。

那么，我的主应用程序是否缺少模块并且无法获取道具？或者有什么其他的方法可以让“理解”？

再次感谢。

---

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

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

我通过传递道具从 .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')

但如果我尝试像以前一样定义道具，应用程序将无法识别它们。编写上述代码摘录的正确方法是什么，以便传递道具？ 换句话说，我应该如何以及应该如何在上面的实例上添加道具定义（另请注意，我还应该实现丹尼尔回答中提到的更改）

---

编辑：

这是 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

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