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

Question

我的组件必须渲染一个对象来填充内容。当我在 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 警告]：无效道具：道具“卡片”的类型检查失败。预期对象，得到值为“card”的字符串。

我也试过了

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

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

[Vue 警告]：渲染错误：“类型错误：无法访问属性“名称”，_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>

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

How to pass an object to a web component generated width Vue?

javascript

vue.js

vue-component

web-component

vue-directives