Transferring event handlers to a child component using slots in Vue 3

After creating a couple of reusable components that include a slot for managing content and style, I started wondering if it's possible to pass an event handler to those components from within the template tag.

ReusableComponent

<a :href="hrefProps"> // The desired handler goes here
  <slot></slot> // Renders plain text without HTML tags
</a>

Main Component

<reusable-component>
  <template @click="sayHelloWorld">Hello World!</template> // Attempt that didn't work
</reusable-component>

I'm still trying to figure out how to make this work. Do I need to wrap them in at least one tag like this?

<template><a @click="sayHelloWorld"></a></template> // Will this solution make it work?

Answer №1

Template tags do not generate an actual HTML element, meaning pi cannot attach listeners or add classes to them.

They simply serve as a semantic tool for wrapping multiple children in a loop.

To apply a listener, target the parent element such as the href tag directly.

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

Encountering a TypeError while trying to import grapesjs into a nextjs project, specifically receiving the error: "Cannot read properties of null (reading 'querySelector')

I encountered an issue while trying to integrate grapesjs into a nextjs project. The error I received was TypeError: Cannot read properties of null (reading 'querySelector') It appears that grapesjs is looking for the "#gjs" container by its id ...

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

Error in Express JS: Attempting to access properties of an undefined variable (reading '0'). Issue with SQL query

Struggling to insert something in my database and then access it directly after. Due to the asynchronous nature of node.js, my plan doesn't seem to work out. However, I am confident that there is a solution to make this happen. Here's the code sn ...

Placement Mismatch of Radio Button in Form.Check Component of React-Bootstrap

Recently, I've been working on implementing a payment method feature where users can choose their preferred payment option using radio buttons. However, there seems to be an issue with the alignment of the button. Below is the code snippet I have so ...

Exploring VueJS Child Component Navigation

Currently facing a challenge with my initial Vue application, which is part of a larger ASP MVC .net app. I have an application consisting of three pages. <router-link to="/Controller/FirstPage" class="list-numbered-item"> FirstPage </router-li ...

Adding Measurement Units to the Values in RoundSlider: A Step-by-Step Guide

I'm working on a roundslider widget and I want to display units with the values. If the value is between 0 and 999, it should show "Hz" next to it. For values between 1000 and 999999, "KHz" should be displayed, and so on. Below is the original slider ...

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

The AngularJS Controller Function

I'm working with a code snippet that includes an Angular Modular Controller containing a function inside the controller itself with a call. I'm unsure if this coding practice is allowed in JavaScript or Angular, and if it is, how does it work? Ta ...

The route is returning a null value in the response

I'm currently using TypeScript to send a GET request in order to retrieve all the members whose isCore value is set to true. Even though I have added multiple entries into the SQL database, the response from res.json is displaying as null. Could this ...

The attempt to retrieve data from the PHP file using Ajax was unsuccessful

I'm attempting to showcase the content of a PHP file on my HTML page using AJAX. Within my HTML file, I have included the following AJAX code: AJAX Code in get_ajax.html <form action=""> First name: <input type="text" id="txt1" onblur="sh ...

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

Styling background images with jQuery

Issue with Implementing jQuery Background Image Swapper and CSS Styling html { background: url(images/image_1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; b ...

Sort through an array of objects using a different array

I am looking to showcase projects based on specific skills. For instance, if I choose "HTML", I want to see all projects that have "HTML" listed in their array of skills. If I select multiple skills, then only display projects that have those exact skills. ...

Scroll the div that is dynamically filled without affecting the scrolling of the main page

My current struggle involves using iScroll in my web project. The goal is to populate a list with articles and slide in a div over the list to display the selected article. While the basic functionality is in place, I face an issue where scrolling through ...

Using PHP variables in JavaScript to access getElementById

I have multiple forms displayed on a single PHP page. They all follow a similar structure: <form id="test_form_1" action="test_submit.php" method="post" name="test_form"> <label>This is Question #1:</label> <p> &l ...

adding a new object to a list in JavaScript using the last key value

Need help with appending a new object list within a nested last key value in JavaScript. Here is my initial input: var list = [12,13,14,15] Desired output: list = [{first : 12, sec : 13},{first:13, sec:14},{first:14, sec:15}] ...

Is it possible to load JavaScript code once the entire page has finished loading?

My webpage includes a script loading an external JavaScript file and initiating an Ajax query. However, the browser seems to be waiting for example.com during the initial page load, indicating that this external dependency may be causing a delay. Is there ...

Is writeConcern not being returned by MongoDb's deleteOne function?

I have a function that deletes a specific document in MongoDb based on an id match. Below is the code snippet. deletePoll: function(db, user_id, callback) { db.collection('polls').deleteOne({ _id: user_id }, ...

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

The data tables are not updating properly, despite receiving the correct JSON data

I am currently facing an issue with my code that I can't seem to solve. Even though the datatable is being filled correctly and the table receives valid JSON data on ajax refresh, it fails to reload. HTML <table id="monatsabschluss" class="li ...