Vuejs：无法使用 v-bind 将对象传递给 Web 组件

Question

我有一个使用 Stencil 构建的 Web 组件，我将其导入到 Vue 项目中。该组件将一个对象作为道具。当我使用 v-bind 传递对象时，它不起作用。当我在 JavaScript 中使用 ref 传递它时，它就起作用了。

例如，这不会设置我的属性:

<my-web-component :my-object="myObject" />

但是这样做：

<template>
  <my-web-component ref="myObjectRef" />
</template>
<script>
export default {
  //...
  mounted() {
   this.$refs.myObjectRef.myObject = myObject // <-- this works
  }
}
</script>

当我在 Angular 中使用 Web 组件时，它像往常一样使用 @Input 工作。

为什么道具在 Angular 中有效，但在 Vue 中我必须在 JavaScript 中分配它？

Answer 1

如果

v-bind 无法确定目标是属性，则假定一个属性，Stencil 组件就是这种情况。在检查组件时，您会注意到 DOM 中的属性绑定为通用字符串（即 [object Object]）：

要在 Vue 2 模板中绑定到 Stencil 组件的属性，请使用 v-bind 的 .prop 修饰符：

<my-web-component :my-object.prop="myObject" />
                            ^^^^^

或者，使用 v-bind 的对象语法（适用于 Vue 2 和 Vue 3）：

<my-web-component v-bind="{ myObject }" />

Vue 3 demo

Vuejs：无法使用 v-bind 将对象传递给 Web 组件

Vuejs: Can't pass object to web component using v-bind

javascript

web-component

vue.js

angular