Vue - Component

Using slots, with global structure to pass data around everywhere to avoid accordion having own scope.

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>

<div id="blockmenu"></div>


<hr>

<script id="tmpl-hello-world" type="text/x-template">
    <div>
    	Hello World {{ user }} {{ global.name }}
      <input v-model="global.name" />
    </div>
</script>


<script id="tmpl-blockmenu" type="text/x-template">
  <div>
    {{ global.name }}
    <accordion :global="global">
			 <template v-slot:default>Content 0 {{ global.name }}</template>
			
       <template v-slot:item1>Content 1 {{ global.name }}</template>

			<template v-slot:item2>Content 2 {{ global.name }}</template>
		</accordion>
</div>
</script>


<script id="tmpl-accordion" type="text/x-template">
  <div class="box">
   {{ global.name }}<br>
  	<slot>
    </slot><br>

  	<slot name="item1">
    </slot><br>
    
    <slot name="item2">
    </slot><br>

  </div>
</script>

<!-- <hello-world user="fred" :global="global"></hello-world> -->

CSS

body {
	    font-size: 20px;
}

.text {
	font-size: 24px;
}
.box {
  border: 1px solid red;
}

JavaScript

Vue.component('hello-world', {
  template: "#tmpl-hello-world",
  props: ['user','global'],
  created: function () {
  	//console.log("article properties:",this.properties);
  }
});


//---------------------------------------------------------

Vue.component('accordion', {
  template: "#tmpl-accordion",
  props: ['global'],
  created: function () {
  	//console.log("article properties:",this.properties);
  	this.global.name = "sid";
  }
});

//---------------------------------------------------------

new Vue({ // create a root Vue instance
  el: '#blockmenu', // this div gets replaced when View is rendered
  template: '#tmpl-blockmenu',
  data: function(){
  	return { global: { name: null } }
  }
});