Vuejs: невозможно передать объект в веб-компонент с помощью v-bind

Question

У меня есть веб-компонент, созданный с использованием Stencil, который я импортировал в проект Vue. Компонент принимает объект как опору. Когда я передаю объект, используя v-bind, он не работает. Когда я передаю его, используя ref в JavaScript, тогда он работает.

Например, это не устанавливает мое свойство:

<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, он работает, используя @Input, как обычно.

В чем причина того, что реквизит работает в Angular, но в Vue у меня есть назначить его в JavaScript?

Answer 1

v-bind предполагает наличие атрибута, если он не может определить, что цель является свойством, как в случае компонентов трафарета. Вы заметите атрибут, связанный как общая c строка (т.е. [object Object]) в DOM при проверке компонента:

Чтобы привязать свойство компонента «Трафарет» в шаблоне, используйте модификатор v-bind * .prop:

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