Passing a variable to a custom component.

Level 58

To pass a variable to a custom component in a framework like Laravel Livewire or Vue.js, you can use props or attributes. Below, I'll provide a solution for both Laravel Livewire and Vue.js.

Laravel Livewire

In Laravel Livewire, you can pass data to a component using props. Here's how you can achieve this:

Define the Component:

First, create a Livewire component called ToyOrFruitInput.

// app/Http/Livewire/ToyOrFruitInput.php
namespace App\Http\Livewire;

use Livewire\Component;

class ToyOrFruitInput extends Component
{
    public $type;

    public function mount($type)
    {
        $this->type = $type;
    }

    public function render()
    {
        return view('livewire.toy-or-fruit-input');
    }
}

Create the Blade View:

Create a Blade view for the component.

<!-- resources/views/livewire/toy-or-fruit-input.blade.php -->
<div>
    @if ($type == 'fruit')
        {{ $getState() }} is a piece of fruit.
    @else
        {{ $getState() }} is a toy.
    @endif
</div>

Use the Component in a Parent View:

Pass the type variable to the component from the parent view.

<!-- resources/views/parent-view.blade.php -->
@php
    $bag = ['type' => 'fruit'];
@endphp

<livewire:toy-or-fruit-input :type="$bag['type']" />

Vue.js

In Vue.js, you can pass data to a component using props. Here's how you can achieve this:

Define the Component:

Create a Vue component called ToyOrFruitInput.

// components/ToyOrFruitInput.vue
<template>
  <div>
    <div v-if="type === 'fruit'">
      {{ getState() }} is a piece of fruit.
    </div>
    <div v-else>
      {{ getState() }} is a toy.
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  methods: {
    getState() {
      // Your logic to get the state
      return 'Some state';
    }
  }
}
</script>

Use the Component in a Parent Component:

Pass the type variable to the component from the parent component.

// ParentComponent.vue
<template>
  <div>
    <ToyOrFruitInput :type="bag.type" />
  </div>
</template>

<script>
import ToyOrFruitInput from './components/ToyOrFruitInput.vue';

export default {
  components: {
    ToyOrFruitInput
  },
  data() {
    return {
      bag: {
        type: 'fruit'
      }
    };
  }
}
</script>

Both of these solutions allow you to pass a variable to a custom component and use it within the component to determine the type of item in the bag.