[Vuejs]-How can I pass data from .js to .vue?

by

1👍

There are two different Vue instances in play here. The one you create directly using new Vue has a property called msg. The instance corresponding to the child component, modal-component, does not.

There are 3 main types of properties in Vue. data, computed and props.

If you have a property defined on the parent in data then you can pass it down to the child using a prop.

<modal-component :msg="msg"></modal-component>

In your .vue file you would then need to define msg as a prop.

props: ['msg']

Properties are not automatically inherited, you always need to pass them down using props.

Documentation: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Without wishing to muddy the waters, this particular example might be better served using a slot but as it’s just an example it’s difficult to say for sure whether that would really be appropriate.

Update:

In full the file test.vue would be:

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

<script>
export default {
  name: 'modal-component',
  props: ['msg']
}
</script>
👤skirtle

Leave a comment