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

Posted 2023-02-23

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

【英文标题】：Passing props to vue instance from .blade.php file using createElement and render function

【发布时间】：2021-05-23 10:22:48

【问题描述】：

---

编辑：更多信息：

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

【参考方案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')

【讨论】：

感谢您的回答和帮助。与我使用的旧方式（我正在编写 props:['data'] 并且正在工作的地方）相比，您还可以添加如何在此实例化上传递道具吗？

您可以使用第二个参数将props传递给createApp，即createApp(render...etc,myProp:'abc')这在docs的某处