[Vuejs]-How to add custom properties to a page in VueJS / Gridsome

by

0👍

✅

Vue uses unidirectional data-flow. Hence there is no way to update data “from below”.

The workaround is to use named slots.

So your layout should look like


<template>
    <h1><slot name="author">Here is a default (fallback) content that would be replaced with content passed into slot. And it is optional.</slot></h1>
    <slot/> <!-- this is a default slot -->
</template>

And your page component should look like 

<template>
  <Layout>
    <template v-slot:author>author here</template>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>
👤Ivan Klochkov

1👍

You could use the $emit function to achieve this.

Inside child component:

$emit('custom-event', 'my value')

Then in your parent you can listen for this event and catch the value.

@custom-event="myMethod"

And with a method:

methods: {
    myMethod (value) {
        console.log(value);
    }
}

This should log ‘my value’

You can read more about custom events here:

https://v2.vuejs.org/v2/guide/components-custom-events.html

👤T. Short

Leave a comment