It is not possible to utilize Vue.js to employ the <slot> feature for rendering the parent component

After attempting to implement the slot feature following the example on the Vue official site, I encountered a failure despite keeping my code very concise.

Parent Component

<template>
  <subMenuTemp>
    <div class="text" >
      parent content
    </div>
  </subMenuTemp>
</template>

<script>
  import subMenuTemp from 'src/test/testChildren.vue'
  export default  {
    data() {
    },
    components: {
      subMenuTemp
    }
  }
</script>

Children Component in Another .vue File

<template>
  <div class="content">
      <slot>
        old content
      </slot>
  </div>
</template>

<script>
  export default {

  }
</script>

Despite the brevity of the code, it's proving challenging for me to identify where exactly I've gone wrong.

Answer №1

Ensure that both components are included in your main.js or a separate .js file that imports Vue. Your code snippet should resemble the following:

import Vue from 'vue'
import App from './App'
import subMenuTemp from './test/testChildren.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App, subMenuTemp }
})

Answer №2

It is not necessary to register all components in the main file as mentioned in other responses.

All you need to do is import the child component into the parent component, just like this:

Have a look at the example here: https://codesandbox.io/s/vue-template-oy15j?fontsize=14

// App.vue
<template>
  <div id="app">
    <parent-component message="Hello Vue !"/>
  </div>
</template>

<script>
import ParentComponent from "./components/ParentComponent";

export default {
  name: "App",
  components: { ParentComponent }
};
</script>
// ParentComponent.vue
<template>
  <child-component>
    <div class="test-parent">{{ message }}</div>
  </child-component>
</template>

<script>
import ChildComponent from "./ChildComponent";

export default {
  name: "ParentComponent",
  components: { ChildComponent },
  props: {
    message: String
  }
};
</script>
// ChildComponent.vue
<template>
  <div class="test-child">
    <slot>default content</slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent"
};
</script>
<!-- Result -->
<div id="app">
  <div class="test-child">
    <div class="test-parent">Hello Vue !</div>
  </div>
</div>

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

How can I integrate NIB into a project created with WebStorm 8 using node.js, Express, Jade, and Stylus?

Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...

Using Node.js to write data to a JSON file

Currently, I am working on a program that scans through an array containing numerous links. It reads through each link, extracts specific text, and then stores it in an output file as JSON. However, I am facing an issue with formatting the JSON file. The ...

Accessing properties in JSON data with AngularJS

I am experiencing issues with accessing a JSON object returned from an $http call in my AngularJS app. I have provided the code snippet below, but it seems that nothing is being rendered on the HTML. Can anyone please assist me in identifying what I might ...

Unable to retrieve data in Node Express after querying completion

I created a basic custom module that is intended to return database records from its methods. After executing a query, I can retrieve all the records but when attempting to assign them to a variable, it shows as null. I'm unsure of what's causin ...

What is the best way to access the next-auth session using getStaticPaths and getStaticProps in dynamic routing scenarios?

I am currently working on implementing dynamic routing in a NextJS application. I need to retrieve the token from next-auth in order to make axios requests to an API and fetch data from getReport and getReports (located in /reports.js). However, I am facin ...

How can you use jQuery.ajax to solely fetch the status code without downloading the entire document?

My application relies on the use of jQuery.ajax to check if a particular resource exists by constantly polling it. Once the resource is no longer returning a 404 status code, the app redirects to view that resource. However, I am concerned about downloadin ...

Navigating the Terrain of Mapping and Filtering in Reactjs

carModel: [ {_id : A, title : 2012}, {_id : B, title : 2014} ], car: [{ color :'red', carModel : B //mongoose.Schema.ObjectId }, { color ...

Encountered a problem while trying to install using npm install

Encountering an error while running npm install on Ubuntu 12.04: Here is a snippet from my npm-debug.log showing where the errors occur: ... (contents of npm-debug.log) ... This is my package.json: { "name": "www", "version": "0.0.1", /"p ...

Utilize angularjs daterangepicker to refine and sift through data

I am currently utilizing the ng-bs-daterangepicker plugin by ng-bs-daterangepicker and encountering difficulty in filtering when selecting a start date and end date. Below is a snippet of my code: <input type="daterange" ng-model="dates" ranges="range ...

Using the md-date-picker along with the md-menu component

Whenever I try to click on the md-date-picker inside md-menu, it unexpectedly closes. You can view the issue on this CodePen link. This seems to be a bug related to ng-material as discussed in this GitHub issue. Any suggestions for a workaround? Here is t ...

Ensured static element-UI table dimensions even with modifications to columns

Creating an Element-UI table and using v-if to control column show/hide has been working perfectly, except for one small issue. The table seems to automatically change size when columns are shown/hidden, even though I have already set fixed width and heig ...

utilize the getStaticProps function within the specified component

I recently started a project using Next.js and TypeScript. I have a main component that is called in the index.js page, where I use the getStaticProps function. However, when I log the prop object returned by getStaticProps in my main component, it shows a ...

Looking to dynamically modify the preselected rows in an Angular Slickgrid grid option when a button is clicked by calling a function (check)

When the button is clicked, certain specific rows are selected using a preselected grid option in Angular Slickgrid. However, if I do this, the preselected row in the grid options changes but it does not display properly. Please assist me. Typescript File ...

Is it possible for asynchronous functions to write to the same object concurrently and result in invalid values?

I have been experimenting with the code below to see if it can cause any issues with the integer i in the object context. My tests so far have not revealed any problems. // Node.js (v10.19.0) const Promise = require('promise') // object access ...

SystemJS could not locate the root directory for RxJS

There seems to be an issue with SystemJS loading rxjs modules on Windows, as it throws a 404 Not Found error on the rxjs directory. This problem does not occur on OSX, and all modules are up to date. GET http://localhost:8080/node_modules/rxjs/ 404 (Not F ...

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help i ...

Angular 11 throws an error stating that the argument of type 'null' cannot be assigned to a parameter of type 'HttpClient'

As I embark on my journey to becoming a developer, I encounter a problem when passing a null argument as shown below: todos.component.spec.ts import { TodosComponent } from './todos.component'; import { TodoService } from './todo.servic ...

Utilize Auth.currentSession() every 5 minutes within Vuex Store for automatic session management

I have been developing an application that makes frequent requests to our API, however, sometimes these requests result in expired tokens. I have explored different solutions such as calling Auth.currentSession and setting the header before sending the re ...

initial render results in undefined data

function Story() { let { id } = useParams(); const pin = useSelector(state => state.pins.pin); const dispatch = useDispatch(); const userid = 2 useEffect(() => { dispatch(getPin(id)); }, [dispatch, id]); return ( <div classN ...

Retrieve and access an array of objects from MongoDB

Assuming I have some data stored in MongoDB as follows - [ { _id: new ObjectId("63608e3c3b74ed27b5bdf6fa"), latitude: 24.3065, hotels: [ { name: "Saunders Oconnor", lat ...