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

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

父组件向子组件传递

// 父组件
<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','对象')
        }
    }
}

github地址

网站地址