我的组件必须渲染一个对象来填充内容。当我在 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 warn]：无效的道具：道具“card”的类型检查失败。期望的对象，得到值为“card”的字符串。
我也尝试过
<my-component :card="card"></card>
但这仅适用于 vue 项目，不适用于导出的 Web 组件。它给出了这个错误：
[Vue warn]：渲染错误：“TypeError：无法访问属性“名称”，_vm.card 未定义”
card="card"card<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:cardcarddata<script>
const app = new Vue({
el: '#app',
data: {
card,
},
}
</script>
<my-element :user.prop="{ name: 'jack' }"></my-element>
<!-- shorthand equivalent -->
<my-element .user="{ name: 'jack' }"></my-element>