组件间传递参数的几种方式
父组件向子组件传递
// 父组件
<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
})
},
// 子元素
<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
})
},
// 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', '信息')
}
}
}
// 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地址
网站地址