父-子组件通信-props
- 父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方式只是简单声明要传的值，后者可以指定每个要传的值的类型(type)、是否必传(required)，还可以设置默认值(default)。
子组件：
<template>
<div class="head">
<el-row>
<el-col :span="24">
<div class="head-con">
<h2>{
{ msg }}</h2>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'Head',
//props : ['msg'] //形式一：字符串数组方式
props : { //形式二：对象方式，指明每个参数的详细信息
msg : {
type : String, //参数类型
default : '', //默认值
required : false //是否必传：否
}
}
}
</script>
<style scoped>
.head-con{
height : 40px;
line-height : 40px;
background-color : black;
color : white;
padding-left : 10%;
}
.head-con h2{
margin : 0;
}
</style>父组件：
<template>
<div class="home">
<Header :msg="mess" />
</div>
</template>
<script>
import Heade from "@/components/Head.vue" //导入子组件
export default {
name: 'Home',
components: {
Header : Heade, //使用子组件
},
data(){
return {
mess : 'Header'
}
}
}
</script>子-父组件通信
- 子组件传值到父组件可以通过自定义事件传递，子组件中使用$emit() API来发射自定义事件，父组件使用v-on监听自定义事件。
子组件：
<template>
<div class="query">
<el-row>
<el-col :span="12">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row>
<el-button type="primary" @click="query">查询</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: "Query",
data() {
return {
form: {
name: "",
age: "",
},
};
},
methods: {
query() {
//通过$emit传递事件给父组件
this.$emit('query',this.form);
},
},
};
</script>父组件：
<template>
<div class="home">
<el-row>
<el-col :span="12" :offset="6">
<Query @query="queryData"/>
</el-col>
</el-row>
</div>
</template>
<script>
import Query from '@/components/Query'
export default {
name: "Home",
data() {
return {}
},
methods: {
queryData(params){
alert(params.name);
}
},
components : {
Query
}
};
</script>非父子组件通信
- 非父子组件通信可以通过中央事件总线，中央事件总线：就是单独创建一个Vue实例对象，专门用来负责组件之间传值。A组件向B组件传值，则A组件通过 $emiit() 发射事件，B组件通过 $on() 接收值。
eventBus.js(文件名自定义)中创建中央事件总线：
import Vue from 'vue'
export default new Vue();将中央事件总线挂载到Vue原型上：
import eventBus from '@/utils/eventBus.js'
Vue.prototype.$eventBus = eventBus A组件：
<template>
<div>
<el-input v-model="inp" style="width : 400px;" /> <br/>
<el-button @click="send" type="primary">传值给组件Brot2</el-button>
</div>
</template>
<script>
export default {
name : 'B1',
data(){
return {
inp : ''
}
},
methods : {
send(){
this.$eventBus.$emit('on-msg',this.inp); //传值
}
},
}
</script>B组件：
<template>
<div>
{
{ dat }}
</div>
</template>
<script>
export default {
name : 'B2',
data(){
return {
dat : 'Brot2组件'
}
},
mounted(){
this.$eventBus.$on('on-msg',(dat) => { //接受值
this.dat = dat;
});
}
}
</script>父组件：
<template>
<div class="brot">
<h1>组件1：Brot1</h1>
<Brot1 />
<br /><br /><br /><br /><br />
<h1>组件2：Brot2</h1>
<Brot2 />
</div>
</template>
<script>
import Brot1 from '@/components/Brot1.vue'
import Brot2 from '@/components/Brot2.vue'
export default {
name : 'Tes',
data(){
},
methods : {
},
components : {
Brot1,
Brot2
},
}
</script>