Как передать данные из родительского vue-компонента в дочерний, если последний является собственным веб-компонентом?

Всем привет. Столкнулся со следующей проблемой (гугл не помог).

Использую Vue.js на обычном html.
<div id="app">
</div>

...
var app = new Vue({
	el: "#app",
	data: function () {}
	...
})


Внутри div#app решил вставить Vue-компонент попроще.
Решил использовать для этих целей однофайловый компонент, т.к. с ним удобнее работать (особенно писать шаблон), например:

<template>
  <div>
   <h1>{{title}}</h1>
   <p>{{obj.id}}</p>
   ...
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
	title: {
		type: String
	},
    obj: {
      type: Object
    },
    arr: {
      type: Array
    }
  }
};
</script>


Далее с помощью команды vue-cli-service build --target wc --name my-component ./src/components/MyComponent.vue перевожу его в веб-компонент и подключаю на странице после подключения самой библиотеки Vue.js как обычный js-скрипт.
Затем вставляю внутрь div#app теги
<div id="app">
	<my-component v-bind:text="title" v-bind:obj="objOne" v-bind:arr="arrTest"></my-component>
</div>


Далее в одном из методов основного приложения я получаю некие данные (title, objOne, arrTest) и передаю их компоненту my-component.

Проблема в том, что внутрь компонента почему все переданные значения приходят как строки, например свойство obj превращается в строку '[Object object]'.

Возникает вопрос, как правильно передать данные полученному компоненту?

Спасибо.
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ответы на вопрос 1
notiv-nt
@notiv-nt
гуглится https://github.com/vuejs/vue-web-component-wrapper...
:obj.prop="objOne" как говорят
или это дело в плагине vue-custom-element
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы