pass datas to component

Question

I've got dynamic component:

<component v-bind:is="current.ComponentName" :myvar="current.Text"></component>

where I'm trying to pass variable myvar for the currently resolved component.

Subcomponent is defined like so:

    <template>
        <div id="home">
            <h1>2 {{ myvar }} aasa</h1>
        </div>
    </template>

    <script>
        Vue.component(
            'MyComponentName',
            {
                props: ['myvar']
            });
    </script>

Dynamic component resolving works but I can't get manage to pass any data via :myvar=.... How can I do that?

I doesn't help me as It looks to be not my case. It looks to be dynamic component specific. — Puchacz, Aug 25 '18 at 16:13
and this - https://stackoverflow.com/questions/43658481/passing-props-dynamically-to-dynamic-component-in-vuejs — martinho, Aug 25 '18 at 16:24

score 1 · Accepted Answer · edited Jul 15 '22 at 05:01

I'm sorry if I misunderstand your question, it's not that clear, if I did you let me know in the comments and I will edit my answer. Also your question is not really complete

I think you misunderstood the difference between a single file component and a Vue.component

You must choose one or the other, You can not mix both.

Eighter you define your component like this:

<template>
  <div id="home">
        <h1>2 {{ myvar }} aasa</h1>
    </div>
 </template>

<script>
export default {
  props: ["myvar"] 
}
</script>

or like this:

Vue.component("component-name", {
  props: ["myvar"], 
  template:`
    <div id="home">
        <h1>2 {{ myvar }} aasa</h1>
    </div>
  `
})

Documentation link: https://v2.vuejs.org/v2/guide/components.html

Thank you, It looks like mixing both of declaring `Vue.component` with `export default` made it wasn't working. It works after I chose a single way. — Puchacz, Aug 25 '18 at 16:29

pass datas to component

1 Answers1