What are some ways to transfer data between parent and child components in Vue.js?

I have defined two different components:

'permissionTitle':customTitle,
'permissionItem':customItem,

When displayed in the main template, they are structured as follows:

    <permissionTitle content="Brand Management">
        <permissionItem>View List</permissionItem>
        <permissionItem>Add</permissionItem>
        <permissionItem>Edit</permissionItem>
        <permissionItem>Delete</permissionItem>
    </permissionTitle>

Now, I am looking to pass values from permissionItem to permissionTitle and vice versa. What is the best way to achieve this?

In permissionTitle.vue:

<template>
    <div id="root">
        <Checkbox>
            <span>{{content}}</span>
        </Checkbox>
        <slot></slot>
    </div>
</template>

In permissionItem.vue:

<template>
    <Checkbox @on-change="change">
        <slot></slot>
    </Checkbox>
</template>

Answer №1

You have the ability to achieve this using the v-model directive.

To implement this functionality in your child component, consider adding a model and prop as shown below:

Vue.component('permissionItem', {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: String
    },
    methods: {
        // Implement the logic for updating the value within your component
        changeValue(newValue) { 
            this.value = value;
            $emit('change', this.value;
    ....

To use this setup, initialize it like so:

<permissionTitle content="Brand Management">
    <permissionItem :v-model="value1">View List</permissionItem>
    <permissionItem :v-model="value2">Add</permissionItem>
    <permissionItem :v-model="value3">Edit</permissionItem>
    <permissionItem :v-model="value4">Delete</permissionItem>
</permissionTitle>

The variables 'valueN' will now be accessible in your parent component.

While Vue's documentation on this topic may not be exhaustive, you can refer to it here: https://v2.vuejs.org/v2/guide/components-custom-events.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

Troubleshooting issue with jQuery animate not correctly scrolling

I am experiencing an issue with my jQuery code that is supposed to scroll a smaller container element within a larger container element when a button is clicked. Despite testing with an alert and verifying that the code is working, the scrolling functional ...

Is there a way to create a discord.js bot that can search for past messages without the need for a json file or storing them in a database?

Similar to the search feature in Discord. Imagine being able to enter !search [user] [query] and getting a response like "50 messages match your query." This would be like a word counting bot that doesn't need a database or local storage.The bot ...

Updating a child component in React while applying a filter to the parent component

Although I've come across this question before, I'm struggling to comprehend it within my specific scenario. I'm currently using a search bar to filter the data, which is functioning properly. However, the image is not updating. The URL bei ...

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

Incorporate an Ajax response script with a Django HttpResponse

How can I pass the ajax response obtained from the view to the template using HttpResponse? I'm unsure of the process. view.py analyzer = SentimentIntensityAnalyzer() def index(request): return render(request, "gui/index.html") @csrf_exempt d ...

The process of mounting a Vue component involves removing the surrounding div element

I am facing an issue while mounting a component on a function. Everything seems to be working fine initially. However, I have configured it to destroy the div after a certain number of seconds. The problem arises when I attempt to add the component again; ...

Is it feasible to exclude certain CSS files in an HTML Master page within the .NET framework?

On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...

Utilizing JSON and AJAX to mine data from databases

I've been working on creating a basic "search" box using Javascript, AJAX, PHP, and JSON. I'm focusing on the "world" database that I downloaded from the MySQL website for this particular project. I've hit a roadblock when trying to retrieve ...

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

Receiving the latest state from Vuex in a Vue3 component

Is there a way to update the user state in Vuex and have it reflect instantly on the frontend without requiring a page reload? I've searched for solutions but haven't found any that work for me. I'm currently exporting the store as a functi ...

How can I incorporate a new object into an existing object in ReactJS?

I am facing an issue where I have an object named waA that is required in the final step. However, in ReactJS, the new object is not updating the previous object using a switch statement in a function. Below is the code for the object: waA = { jso ...

Alternatives to AMP in AngularJS

My current project is based on Angular 1.x and I recently received advice from an SEO specialist to enhance the initial mobile load speed of my website. One suggestion was to implement AMP, but after some research, it appears that integrating AMP with Angu ...

Refresh Angular 2 data after a related data update

I am facing an issue with my <select> elements in Angular. One for the Districts and another for the Cities. The districts are fetched using the getDistricts() function within the ngOnInit() function without any problems. However, I am unsure how to ...

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

I have successfully implemented a feature to display markers on the map from a geojson file. Currently, when I hover over a marker, I can see its properties in a popup. However, I now want to enhance this functionality so that when a user clicks on a mar ...

Steps for retrieving a table of records with Jquery and sending it to the server through AJAX

Displayed below is a table I have: <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_GridView1" style="border-collapse:collapse;" class="table table-striped"> <tbody> <tr> <th scope="col"> ...

What is the process for incorporating an animated gif into a scene?

I'm trying to incorporate an animated gif in three.js. What's the best way to do it? var materialTextured = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('images/pin.gif'), transparent: true, ...

One-page application featuring preloaded data from a backend API

Imagine building a single-page application that relies heavily on client-side interactions communicating with the server through API methods. When we land on the index page that displays all records from the database, we essentially make two initial requ ...

Listen for a click event on an Unordered List using addEventListener

Struggling to transform a for loop that iterates through an unordered list of hyperlinks and adds an 'onclick' function to each into one using an event listener instead. Unfortunately, I have not been able to create a functional solution. Below ...

Looking for a way to implement a vertical autoscroll <ul> list that responds to mouse movement using JavaScript and jQuery

Could you assist me in enabling the list items to be moved using mouse movement? When the user moves the mouse cursor vertically upward over the list, the list should scroll downward. If the user moves the mouse cursor downward over the list, the list shou ...