如何将道具传递给vuejs v3中的根App组件?

时间:2020-10-21 04:53:12

标签: javascript vue.js vuejs3

如何从div主文件夹传递一些变量:

<div 
      id="app" 
      someVariable='some value'
></div>

并在VueJS v3.0的主要App组件中将其作为道具:

    name: "App",
    components: {
    },
    props: {
        someVariable: {
            type: String,
            default: "-"
        
    }
}

1 个答案:

答案 0 :(得分:1)

您无法使用props访问该属性,但可以使用一些document.getElementById("app").getAttribute("someVariable")这样的Vanilla js DOM来获取该属性的值

const {
  createApp
} = Vue;
const App = {
  props: ["someVariable"],
  data() {
    return {

    }
  },
  mounted() {
    console.log(document.getElementById("app").getAttribute("someVariable"))
  }
}
const app = createApp(App)
app.mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" someVariable='some value'>
  Vue 3 app
</div>