Communicating variable in vue.js between components

Question

I am building app using laravel and vue. I have navbar, currently it looks like:

<template>
<nav class="navbar">
    <p>{{msg}}</p>
</nav>
</template>

And I use it like here:

 <body class="">
        <div id="app">
            <div class="">
            <navbar></navbar>
            @yield('content')
            </div>
        </div>
    </body>

In yield I am loading another components, so I have navbar and another component together. Now I want to override that {{msg}} variable from navbar in another components. In every component that variable will be diferent.

I do not know how to override it in components and from {{msg}} do some text. Can you help me? (That code above is all what I have)

Hiren Gohel · Accepted Answer · 2017-09-06 13:03:09Z

1

If you want to use msg in other components, then you need to use prop

Use like:

props: ['msg'],

Then, you need to bind it like:

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

In your component, you can take it like:

<template>{{ msg }}</template>

Hope you understand!

answered Sep 6, 2017 at 13:03

Hiren Gohel

5,0496 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

24 Comments

Rowinski Bartosz Over a year ago

Not this way. I have navbar and index for example. In navbar i have <p>{{msg}}</p>. Now when we are on index page that msg should turn into text for example 'index page'. I do not know how to do it. I do not want to add another html elements. Should be that what I have.

Hiren Gohel Over a year ago

This is the trick of props what is right! I don't think it may turn into different text that you want!

Rowinski Bartosz Over a year ago

Can u explain me more about the code you wrote? I don't understand where put it

Hiren Gohel Over a year ago

Ok, use props in file from you export it, in same file <component-name :msg="msg"></component-name> and get {{ msg }} in any component you want! Please refer this: vuejs.org/v2/guide/components.html#Props

Rowinski Bartosz Over a year ago

errors in navbar - 1. props must be strings when using array syntax. 2. Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

|

tony19 · Accepted Answer · 2022-07-15 01:16:44Z

0

Components can be communicate with props. You can transfer the data to another components and you can use if statement.

https://v2.vuejs.org/v2/guide/components.html#Props

edited Jul 15, 2022 at 1:16

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 6, 2017 at 12:49

Eindex

53 bronze badges

4 Comments

Rowinski Bartosz Over a year ago

Should I do it in app.js?

Eindex Over a year ago

No need that. You have to creat props on where ever you may want to use. And after you can take the data in a html tag like that :data="dataname" youtube.com/watch?v=PPmg7ntQjzc

Rowinski Bartosz Over a year ago

But I don't want to add another html in my child components. Is there any way to override that variable in data() or something like this?

Eindex Over a year ago

You are not adding any html tag. This is a component, <yield></yield> and after the props, it's happening like this <yield :props="props"></yield> like that. Yield component can be read what in side navbar, and you can act from this.

Collectives™ on Stack Overflow

Communicating variable in vue.js between components

2 Answers 2

24 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

24 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related