VueJS 通过渲染传递数据

Posted 2023-02-22

【中文标题】VueJS 通过渲染传递数据

【英文标题】：VueJS Passing data Through render

【发布时间】：2017-08-08 05:46:04

【问题描述】：

我目前正在使用 VueJS 2，我想将一些参数从 html 传递到 VueJS 组件。让我给你看看。

我的 Html Div 看起来像这样：

<div id="app" :id="1"></div>

还有我的javascript：

new Vue(
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
);

我的应用组件：

<template>
  <div>
     id 
  </div>
</template>
<script>
export default 
  props: 
   id: Number
  

</script>

我想在我的 App 组件中获取在 Html 中传递的 id。 我该怎么办？

【问题讨论】：

id 不是一个好名称的道具，因为它已经是一个属性。

【参考方案1】：

这是一种方法。

<div id="app" data-initial-value="125"></div>

new Vue(
  el: '#app',
  render: h => h(App, 
    props:
      id: document.querySelector("#app").dataset.initialValue
    
  )
)

但您不必使用渲染函数。

new Vue(
  el: '#app',
  template:"<app :id='id'></app>",
  data:
    id: document.querySelector("#app").dataset.initialValue
  ,
  components:
    App
  
)

另外，我使用querySelector 假设您将initialValue（而不是id）作为属性呈现到页面，但您可以轻松地将其放在页面上的其他位置，例如隐藏输入或某物。真的没关系。

【讨论】：

我无法让它按原样工作，但如果在 new Vue() 之前的一行上检索属性的值，将其存储为变量并传递变量，它似乎可以工作in 作为属性值

@Zak，你是对的。 #app 将被创建后的 vue 实例替换。