如何获取 Vue 应用程序容器 div 属性答案

【问题标题】：How to get Vue app container div attribute如何获取 Vue 应用程序容器 div 属性
【发布时间】：2021-09-25 19:46:52
【问题描述】：

我有一个页面，该页面由我的应用程序在 java (SSR) 中生成，具体取决于某些数据（例如，某个实体的发布者）。我想创建某种可重用的 Vue 组件，它会调用 API 方法并请求有关当前打开的实体的一些数据。此外，在某些情况下，一个页面上可能会有多个此类组件。

作为一名大多数时间的后端开发人员，我唯一无法真正弄清楚的是如何告诉组件我要获取哪个实体。我想到的唯一解决方案是生成具有附加属性的父 <div class="my-vue-component"><div>，例如<div class="my-vue-component" publisher-id="123"><div>.

但我找不到是否有办法从 Vue 实例内部访问该属性。（请注意，我没有此 div 的固定 ID，因为同一页面上可能有许多此类组件引用不同的数据）。

欢迎任何建议。

【问题讨论】：

标签： javascript vue.js components

【解决方案1】：

如上一个答案所述，您将需要使用道具。虽然由于您会将数据传递给多个组件并且数据可能会发生变化，但应该有一种方法来响应这些变化。

为此，您必须将prop 与页面/父组件中的反应变量绑定。

所以你的 SSR 代码应该是这样的

<my-vue-component :publisher-id="openId"></blog-post>

在您的页面/父组件内部将驻留openId，您可以根据需要对其进行更改，并且如果传递给它的 prop 发生更改，您的组件将重新渲染。

export default {
  data(){
    return {
      openId:1
    } 
  }
}

【讨论】：

【解决方案2】：

您似乎在寻找components-props。

你可以定义一个类似的道具

Vue.component('blog-post', {
 // camelCase in JavaScript
 props: ['postTitle'],

您的 SSR 代码应该正在生成：

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

在组件方法中，您可以使用 this.postTitle 访问传入的值

【讨论】：