VueJS 通过渲染传递数据

Question

我目前正在使用 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。我该怎么办？

Answer 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）作为属性呈现到页面，但您可以轻松地将它放在其他地方在页面上，例如隐藏输入或其他内容。真的没关系。

VueJS 通过渲染传递数据

VueJS Passing data Through render

html

javascript

render

vue.js