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

父组件向子组件传递

// 父组件<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.jsimport Vue from 'vue';// 使用 Event Busconst 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.jsimport 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.vueimport { mapState, mapAcions } from 'vuex'export default{    computed: {        // 解构赋值        ...mapState({            userinfo: state => state.userinfo        })     },    methods: {        ...mapActions({            getUser: 'getUser'        }),        handleUserInfo(){            // 调用            this.$store.dispatch('getUser','对象')        }    }}

github地址

网站地址