Question

如何将对象传递给 Web 组件生成的宽度 Vue？

2021-08-30

1074

javascript vue.js vue-component web-component vue-directives

我的组件必须渲染一个对象来填充内容。当我在 Vue 项目中工作时，我可以毫无问题地传递此对象

<my-compnent :card="card"></my-component>

但是当我尝试使用构建的组件时，它不会将“MyCard”读取为对象，而是读取为字符串...请帮帮我

我尝试使用与 vue 相同的方式，使用 :card 但它不起作用，如果我只使用 card="card" 它可以访问组件但没有对象

我的代码：

<script>
 card =
     {
        name: 'card',
        graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
        subtitle: 'about this card',
        info: 'this is a test content card',
        selector1: [
          { name: 'opt 1' },
          { name: 'opt 2' },
          { name: 'opt 3' }
        ],
        selector2: [
          { name: 'opt A' },
          { name: 'opt B' },
          { name: 'opt C' }
        ]
      }
</script>
<script src="https://unpkg.com/vue"></script>
<body>
   <my-component card="card"></card>
</body>

以及错误：

[Vue 警告]：无效 prop：prop“card”的类型检查失败。预期对象，得到的字符串值为“card”。

我也试过了

<my-component :card="card"></card>

但这只适用于 vue 项目，不适用于导出的 web 组件。它给出此错误：

[Vue warn]：渲染时出错：“TypeError：无法访问属性“name”，_vm.card 未定义”

Answer 1

card="card" 将字符串 'card' 作为值传递给 card 属性。如果您想将 JS 对象传递给 Vue 外部的导出 Web 组件，那么您必须在 JS 本身中执行此操作。

<script>
 const card =
     {
        name: 'card',
        graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
        subtitle: 'about this card',
        info: 'this is a test content card',
        selector1: [
          { name: 'opt 1' },
          { name: 'opt 2' },
          { name: 'opt 3' }
        ],
        selector2: [
          { name: 'opt A' },
          { name: 'opt B' },
          { name: 'opt C' }
        ]
      }
  let comp = document.querySelector('my-component')
  comp.card = card
</script>
<body>
   <my-component card="card"></card>
</body>

只有当您在 vue 项目内部工作时，您才可以使用 v-bind:card 或简单的 ':card'，在这种情况下您不需要使用导出的组件。但在这种情况下，对象 card 需要传递给 Vue 实例的 data 属性，否则 Vue 找不到它。这就是您收到错误的原因。

<script>
const app = new Vue({
  el: '#app',
  data: {
    card,
  },
}
</script>

Answer 2

<my-element :user.prop="{ name: 'jack' }"></my-element>

<!-- shorthand equivalent -->
<my-element .user="{ name: 'jack' }"></my-element>