communication between component to component in vuejs

every thing is component-> b-form-radio, b-input,

it has props

parent to child->props

child to parent -> this.$parent,this.$ref

vue to vue-> vuex or event bus

In Vue.js, there are several ways for components to communicate with each other. Here are a few examples:

1. Props: Props are used to pass data from a parent component to a child component. The child component receives the data as a prop and can use it in its template or methods. For example:

1. For example:

// Parent component
<template>
  <child-component :message="hello"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: { ChildComponent },
    data() {
      return {
        hello: 'Hello from parent'
      }
    }
  }
</script>

// Child component
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

javascript

In this example, the parent component passes a message prop to the child component, which displays it in its template.

2. Events: Events are used to pass data from a child component to a parent component. The child component emits an event and the parent component listens for it using the v-on directive. For example:

// Parent component
<template>
  <child-component v-on:message="handleMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: { ChildComponent },
    methods: {
      handleMessage(message) {
        console.log(message)
      }
    }
  }
</script>

// Child component
<template>
  <button v-on:click="sendMessage">Send message</button>
</template>
<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message', 'Hello from child')
      }
    }
  }
</script>

javascript

In this example, the child component emits a message event when the button is clicked, and the parent component listens for the event and handles the message in its handleMessage method.

3. Vuex: Vuex is a state management pattern and library for Vue.js. It provides a centralized store for managing the state of an application, and allows components to access and update the state using actions and mutations. For example:

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

// Parent component
<template>
  <div>{{ message }}</div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    computed: {
      ...mapState(['message'])
    },
    methods: {
      ...mapActions(['updateMessage'])
    },
    created() {
      this.updateMessage('Hello from parent')
    }
  }
</script>

// Child component
<template>
  <div>{{ message }}</div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState(['message'])
    }
  }
</script>

In this example, the parent component dispatches an updateMessage action to update the message state in the store, and the child component displays the message by accessing the state using the mapState helper.

These are just a few examples of the ways components can communicate in Vue.js. There are many other techniques and patterns, depending on the complexity and requirements of the application.

with component and for loop

<cart-product v-for="item in products"

:product="item"

:key="item.id"/>

outputscompoinent.vue

<button

type="button"

class="btn btn-primary text-right ma-10px"

v-on:click="submitOutputs()"

>Submit</button>

submitOutputs: function() {

this.$emit('submitOutputs', form_data);

}

parentcompoent

<outputs-component

v-if="assignments"

:assignments="assignments"

content_type="analysis"

@submitOutputs="submitOutputs($event)"

@onAlert="onAlert($event)"

/>

submitOutputs: function (form_data) {