组件之间如何进行传值

组件之间如何进行传值 如果组件没有嵌套关系呢

1.父子组件之间传值

//父组件
<div id="app">
 	<horizontal-tab :tab-list="sabcClassList" :tab-item="sabcClassItem" v-on:tab-click="sabcClassCb"></horizontal-tab>
</div>
<script>
import HorizontalTab from '../../components/HorizontalTab';
let app = new Vue({
 data: {
 	sabcClassList:[{value:1,name:"一年级"},{value:2,name:"二年级"},{value:3,name:"三年级"}],
 	sabcClassItem:{value:1,name:"一年级"}
  },
  components: {
        HorizontalTab
    },
    methods() {
	    sabcClassCb: function(item) {
            let vm = this;
            vm.sabcClassItem = item;
        },
    },
	created() {
  	},
  	mounted() {
  	},
})
</script>

//子组件HorizontalTab
//横向tab选择 tab之间无间距
//tabItem：默认选中{value:'all',name:'全部年级'}
//tabList数据示例：[{value:'all',name:'全部年级'},{value:'1',name:'一年级'}]
<template>
    <div class="classList" v-if="tabList.length>0">
        <ul>
            <li v-for="(item,index) in tabList" v-bind:key="item.value + '_' + index"
                v-text="item.name" @click="getValue(item)"
                v-bind:class="{'active':item.value === tabItem.value,'allClass':item.value == 'all'}"></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "HorizontalTab",
    props: {
        tabList: {
            type: Array,
            default: function() {
                return [];
            }
        },
        tabItem: {
            type: Object,
            default: function() {
                return {
                    name: "",
                    value: ""
                };
            }
        }
    },
    methods: {
        getValue(item) {
            this.$emit("tab-click", item);
        },
    },
    mounted: async function() {
    }
};
</script>

说明：
父组件给子组件传值通过:字段名传值 子组件在props内接收父组件传过来的值
子组件给父组件传值通过$emit 父组件通过v-on绑定事件来接收子组件传过来的值

2.兄弟组件之间的传值

1）利用父组件为中介进行传值
将HorizontalTab组件内的sabcClassItem改变值 传给HorizontalTab2组件内

//父组件
<div id="app">
 	<horizontal-tab :tab-item="sabcClassItem" v-on:tab-click="sabcClassCb"></horizontal-tab>
 	<horizontal-tab1 :tab-item="sabcClassItem"></horizontal-tab>
</div>
<script>
import HorizontalTab from '../../components/HorizontalTab';
import HorizontalTab1 from '../../components/HorizontalTab1';
let app = new Vue({
 data: {
 	sabcClassItem:{value:1,name:"一年级"}
  },
  components: {
        HorizontalTab,
        HorizontalTab1
    },
    methods() {
	    sabcClassCb: function(item) {
            let vm = this;
            vm.sabcClassItem = item;
        },
    },
	created() {
  	},
  	mounted() {
  	},
})
</script>

//子组件HorizontalTab
<template>
    <div class="classList">
        <p v-text="tabItem.name" @click="getValue"></p>
    </div>
</template>

<script>
export default {
    name: "HorizontalTab",
    props: {
        tabItem: {
            type: Object,
            default: function() {
                return {
                    name: "",
                    value: ""
                };
            }
        }
    },
    methods: {
        getValue() {
            this.$emit("tab-click", {value:2,name:"二年级"});
        },
    },
    mounted: async function() {
    }
};


//子组件HorizontalTab1
<template>
    <div class="classList">
        <p v-text="tabItem.name"></p>
    </div>
</template>

<script>
export default {
    name: "HorizontalTab1",
    props: {
        tabItem: {
            type: Object,
            default: function() {
                return {
                    name: "",
                    value: ""
                };
            }
        }
    },
    methods: {
    },
    mounted: async function() {
    }
};
</script>

说明：HorizontalTab内通过点击事件 $emit讲sabcClassItem改变的值传给父组件
父组件通过v-on接收后 改变data中的sabcClassItem
再传递给子组件HorizontalTab1

2）利用全局模型vuex

详见Vuex–理解Vuex是什么

3）设置全局函数
buf.js
将HorizontalTab组件内的sabcClassItem改变值 传给HorizontalTab2组件内

//buf.js
import Vue from 'Vue'
export default new Vue

//子组件HorizontalTab
<template>
    <div class="classList">
        <p v-text="tabItem.name" @click="getValue"></p>
    </div>
</template>

<script>
import Bus from 'bus.js' ;
export default {
    name: "HorizontalTab",
    props: {
        tabItem: {
            type: Object,
            default: function() {
                return {
                    name: "1",
                    value: "一年级"
                };
            }
        }
    },
    methods: {
        getValue() {
             Bus.$emit('listenToA', {value:2,name:"二年级"});
        },
    },
    mounted: async function() {
    }
};


//子组件HorizontalTab1
<template>
    <div class="classList">
        <p v-text="tabItem.name"></p>
    </div>
</template>

<script>
import Bus from 'bus.js';
export default {
    name: "HorizontalTab1",
    props: {
        tabItem: {
            type: Object,
            default: function() {
                return {
                    name: "",
                    value: ""
                };
            }
        }
    },
    methods: {
	    getAData (val) {
	      console.log(`HorizontalTab组件传递过来的数据: ${val}`); // {value:2,name:"二年级"}
	    }
    },
    monted() {
	    Bus.$on('listenToA', this.getAData);
	},
};
</script>