When I run this code (
$vm0.$children.forEach(tab => console.log(tab.name));<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
<style type="text/css">body {padding-top:40px; }</style>
</head>
<body>
<div id="root" class="container">
<tabs>
<tab name="About Us" :selected="true">
<h1>Here is the content for About us tab.</h1>
</tab>
<tab name="About Our Culture">
<h1>Here is the content for culture tab.</h1>
</tab>
<tab name="Contact tab">
<h1>Here is the content for contact us tab.</h1>
</tab>
</tabs>
</div>
<script src="js/11.js"></script>
</body>
</html>
And here is my JavaScript code:
Vue.component('tabs', {
template: `
<div>
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
mounted() {
console.log(this.$children);
}
});
Vue.component('tab',{
template: `
<div><slot></slot></div>
`,
props: {
name: { required : true }
}
})
new Vue({
el: "#root"
})