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

jiezi

5 年前

// 父组件
<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 地址

网站地址

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

父组件向子组件传递

子元素调用父元素的方法