How to pass value from one child component to another in VueJS?

Emit an event in ItemsList component with image_url and in Menu component pass image_url to ItemImage component as a prop. I did this in below codesandbox check it out.

https://codesandbox.io/s/wild-moon-mbto4

You can try with emitting an event from the child to the parent component.

In your child component ItemsList.vue, emit an event to the parent component (where the highlight property is set to true):

created() {    var self = this;    self.menuItems.map((x, i) => {      self.$set(self.menuItems[i], "highlight", false);    });    var init = 0;    setInterval(function() {      if (init === self.menuItems.length) {        init = 0;      }      self.menuItems[init].highlight = true;      //emit an event to trigger parent event      this.$emit('itemIsHighlighted', menuItems[init].image_url)      if (init === 0) {        self.menuItems[self.menuItems.length - 1].highlight = false;      } else {        self.menuItems[init - 1].highlight = false;      }      init++;    }, 2000);  }

Then in your parent component Menu.vue:

<ItemsList @itemIsHighlighted="onItemHighlighted"/><ItemImage :image_url="this.selectedItem" ></ItemImage>...export default {    data() {        return {            selectedItem: ''         }     },     methods: {        onItemHighlighted(value) {            console.log(value) // someValue            this.selectedItem = value        }    }}

I couldn't test it, but I hope it helps.

You can also check this answer here.

P.S. Using Vuex would make this task a lot easier.