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与$emit中data保持一致 由于$emit发送了多个参数 所以此处接收使用arguments接收 -->
			<my-tab-2 @data='getdata(arguments)'></my-tab-2>    
		</div>

    </template>