组件间传递参数的几种方式

父组件向子组件传递

// 父组件
<template>
<center-template :form='userinfo'></center-template>
</template>
<script>
import CenterTemplate from '../../components/admin/userCenterTemplate'
export default {
 components: {
 'center-template': CenterTemplate
 },
 data () {
 return {
 userinfo: {name: 'jack'}
 }
 }, 
}
</script>
// 子组件
export default {
 props: {
 // 接收
 form: {
 type: Object,
 default: {
 name: '',
 }
 }
 },
}

子元素调用父元素的方法

• 直接在子元素中调用父元素的方法

// 子元素
<el-input @input="changeInput" class="search-input" v-model="serachValue" placeholder="请输入搜索内容"></el-input>
changeInput(){
 // 子元素调用父元素的方法1
 if(this.$parent.nullSerarchResult){
 // 新增标签
 this.$parent.nullSerarchResult()
 }
},
// 父元素
 <v-search></v-search>
nullSerarchResult(val){
 this.pageNum = 1
 this.init({
 searchKey: val
 })
},

• 在子元素中使用$emit调用父元素的方法

// 子元素
<el-button @click="addNewFun" size='small' class="search-btn" type="primary">新增</el-button>
addNewFun(){
 // 第三种方式是发布给父元素
 this.$emit('addTagFun')
}
// 父元素
<v-search 
@addTagFun='addTagFun'
></v-search>
addTagFun(){
 this.$router.push('/admin/add_blog')
}, 

• 在子元素中绑定父元素的方法名

// 子元素
<el-button @click="searchResultChild" size='small' class="search-btn" type="primary">搜索</el-button>
props: {
 searchResult: {
 type: Function,
 default: null
 }
},
searchResultChild(){
 // 调用方法2，这种需要再props中声明
 if(this.searchResult){
 this.searchResult(this.serachValue)
 }
},
// 父元素
<v-search 
:searchResult='searchResult'
></v-search>
 searchResult(val){
 this.pageNum = 1
 this.init({
 searchKey: val
 })
},

• 使用event bus来实现组件间的通讯

// common/bus.js
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
// 组件1(接收通知信号)
import bus from '@/common/bus.js'
export default{
 data(){
 return {
 collapseData: '' 
 }
 },
 created() {
 // 监听collapse，有变动就会收到通知，并改变collapseData值
 bus.$on('collapse', msg => {
 this.collapseData = msg
 })
 }
}
// 组件2 发布信号
import bus from '@/common/bus.js'
export default {
 methods: {
 sendData(){
 // 发布信号，触发这个函数，其他的接收函数都会收到相应的信息
 bus.$emit('collapse', '信息')
 }
 }
}

还有一种就是借用vuex传递信息

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 userinfo: {},
 },
 mutations: {
 'SET_ROLES':(state,userinfo) => {
 state.userinfo = userinfo
 },
 },
 actions: {
 getUser({commit, state},userinfo){
 commit('SET_ROLES',userinfo)
 },
 }
})
export default store
// views/slider.vue
import { mapState, mapAcions } from 'vuex'
export default{
 computed: {
 // 解构赋值
 ...mapState({
 userinfo: state => state.userinfo
 }) 
 },
 methods: {
 ...mapActions({
 getUser: 'getUser'
 }),
 handleUserInfo(){
 // 调用
 this.$store.dispatch('getUser','对象')
 }
 }
}