1 <!-- Agrega esto en tu archivo HTML -->2 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>3 4 5 <div id="app">6 <ul>7 <file-folder :data="fileSystem" @fileClick="handleClick"></file-folder>8 </ul>9 </div>10 11 <script>12 // Define el componente13 Vue.component('file-folder', {14 props: ['data'],15 template: `16 <li @click="handleClick">17 {{ data.name }}18 <ul v-if="data.children">19 <file-folder v-for="child in data.children" :data="child" :key="child.name" ref="childComponent"></file-folder>20 </ul>21 </li>22 `,23 methods: {24 handleClick() {25 this.$emit('fileClick', this.data);26 }27 },28 mounted() {29 this.$refs.childComponent?.$on('fileClick', node => {30 this.$emit('fileClick', node);31 });32 }33 });34 </script>35 36 37 38 <script>39 // Crea la instancia de Vue40 new Vue({41 el: '#app',42 data: {43 fileSystem: {44 name: 'root',45 children: [46 {47 name: 'folder1',48 children: [49 { name: 'file1.txt' },50 { name: 'file2.txt' }51 ]52 },53 {54 name: 'folder2',55 children: [56 { name: 'file3.txt' },57 { name: 'file4.txt' }58 ]59 },60 { name: 'file5.txt' }61 ]62 }63 },64 methods: {65 handleClick(node) {66 console.log('Item clicked:', node.name);67 // Agrega cualquier lógica adicional aquí68 }69 }70 });71 </script>72 Enlace
El enlace para compartir es: