vue学習ノート:VUEコンポーネント通信(子伝親)

参照:

<div id="app">
       <my-tab>my-tab>
div>

js:

var vm = new Vue({
     
				el: '#app',  //   
				data: {
      
				},
                components: {
     
                    'my-tab':{
        //    
                        template: '#sueTab',
                        data(){
     
                            return {
     
								childn: 0,    //                  
								chindtablist: []    //   
                            }
						},
						methods:{
     
							getdata:function(d){
       //                data          d         
								//       ，  arguments  ，          
								this.childn = d[0];
								this.chindtablist = d[1];
							}
						},
						components:{
     
							'my-tab-2':{
         //    
								template: '#sueTab2',
								data(){
     
									return {
     
										n: 0,
										tabList: [
											{
     name:'aaa', msg: 'aaa  '},
											{
     name:'bbb', msg: 'bbb  '},
											{
     name:'ccc', msg: 'ccc  '}]
									}
								},
								methods: {
     
									send: function(){
     
										//          ('data',this.n)
										//                    @data="getdata"   @data  data       'data'      
										//        ('data',this.n,this.tabList)
										//                    @data="getdata(arguments)"   arguments        arguments    
										this.$emit('data',this.n,this.tabList);     
									}
								},
								mounted:function(){
         //        
									this.send();
								},
							}
						}

                    }
                },

			})

テンプレート:

<template id="sueTab">
        <div class="Sue-tab">
			<ul class="tab-head nav nav-tabs">
				<li role="presentation" v-for="(v,i) in chindtablist" :class="childn==i? 'active':''" @click="childn = i"><a href="#">{
    {v.name}}a>li>
			ul>
			<div class="tab-body">
				<div v-for="(v,i) in chindtablist" v-if="i==childn">{
    {v.msg}}div>
			div>
			
			
			<my-tab-2 @data='getdata(arguments)'>my-tab-2>    
		div>

    template>