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

这是一种方式。

df = structure(list(transaction_id = c(1L, 1L, 2L, 2L, 2L, 3L, 4L), 
    productsku = c("SK0001", "SK0002", "AB0001", "AC0001", "AC0002", 
    "BC0001", "BC0002")), .Names = c("transaction_id", "productsku"
    ), class = "data.frame", row.names = c(NA, -7L))

但你不必使用渲染功能。

<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）作为属性呈现给页面，但您可以轻松地将其放在其他位置在页面上像隐藏的输入或东西。真的没用。

VueJS通过渲染传递数据

1 个答案: