New to VueJs. Finally getting my feet wet, this is how to pass props:

Source: /g/xampp8/htdocs/vuejs/vue-expense-tracker

example, need to have reactive component from App.vue to child component called TranscationList.vue so this is how the code will look like:

App.vue

<template>
  <div class="container">
    <!-- PASSING PROPS -->
    <TransactionList :transactions="transactions" />
  </div>
</template>
 
<script setup>
import TransactionList from './components/TransactionList.vue'
// ref is to make component reactive
import { ref } from 'vue';
 
const transactions = ref([
    { id: 1, text: "Flower", amount: -19.99 },
    { id: 2, text: "Salary", amount: 299.97 },
    { id: 3, text: "Book", amount: -10 },
    { id: 4, text: "Camera", amount: 150 },
]);

</script>

TranscationList.vue

<template>
    <div>
        <ul id="list" class="list">
        <!-- LOOP THROUG ARRAY -->
            <li v-for="transaction in transactions" :key="transaction.id"
                :class="transaction.amount < 0 ? 'minus' : 'plus'">
                {{ transaction.text }} <span>${{ transaction.amount }}</span>
                <button class="delete-btn">x</button>
            </li>
        </ul>
    </div>
</template>
<script setup>
// get props from App.vue, Need defineProps
import { defineProps } from 'vue';
const props = defineProps({
    transactions: {
        type: Array,
        required: true
    }
})
</script>