Vue.js VueJS 通过渲染传递数据

发布于03月17日

我目前正在使用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>

我想在我的应用程序组件中的Html中传递id.

推荐答案

这里有一个方法.

<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)作为属性呈现给页面，但您可以很容易地将其放置在页面上的其他位置，比如隐藏输入或其他内容.真的没关系.