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>