是否可以从根 Vue 3 组件访问数据/html 上下文

Question

我过去使用过 Vue，但一直在努力解决如何将信息/参数传递给根 Vue 3 组件的问题。在我的 html 中，我想要这样的东西：

  <div class="nav-app" nav="some-nav-jht"></div>

在我的 mounted() 中，我可以通过这样的方式访问 nav：

mounted(){
    console.log('here is nav: ' + this.nav);

我该怎么做？我通过从 CDN 加载 Vue（没有 webpack 等...）来做到这一点。

Answer 1

正如评论中指出的那样，template refs 允许访问来自 <script> 的元素。

将 ref 属性应用于具有名称（例如 "navapp"）的元素：

<div id="app">                             
  <div class="nav-app" nav="some-nav-jht" ref="navapp">⋯</div>
</div>

然后在您的 mounted 挂钩中，通过 this.$refs.REFNAME:

访问引用

<script>
Vue.createApp({
  mounted() {
    const navapp = this.$refs.navapp
    console.log('here is nav: ' + navapp.getAttribute('nav'))
  }
}).mount('#app')
</script>

Vue.createApp({
  mounted() {
    const navapp = this.$refs.navapp
    console.log('here is nav: ' + navapp.getAttribute('nav'))
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
<div id="app">
  <div ref="navapp" nav="some-nav-jht">Hello world</div>
</div>

是否可以从根 Vue 3 组件访问数据/html 上下文

Is it possible to access data / html context from root Vue 3 component

javascript

vue.js

vuejs3