父子组件之间的通信
概念:A组件中调用B组件,那么A组件就是父组件,B组件就是子组件
通信方式:
父组件向子组件传递数据——使用props
子组件向父组件传递数据——使用this.$emit暴露一个function给父组件
例子
子组件(一般是组件)
<template>
<div>
<div class="father-to-son">
{{name}}
<div v-if="myHead">
show my head
</div>
<div>
<div v-for="item in myList" :key="item.value"
:label="item.label"
:value="item.value">
{{item.label}} {{item.value}}
<br>
</div>
<el-input :placeholder="myPlaceholder"></el-input>
</div>
</div>
<hr>
<hr>
<div class="son-to-father">
<el-input placeholder="子组件给父组件" v-model="message"></el-input>
<el-button type="success" @click="toFather">抛数据给父组件</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
},
myHead: {
type: Boolean,
default: true
},
myList: {
type: Array,
default: () =>[
{
value: '1',
label: '测试1'
},
{
value: '2',
label: '测试2'
}
]
},
myPlaceholder: {
type: String,
default: ''
}
},
data(){
return{
message: '',
}
},
methods:{
toFather(){
let res = this.message;
this.$emit("toFather",res);
}
}
}
</script>
<style scoped>
</style>
父组件(显示的界面)
<template>
<div class="father">
<test
:my-head="myHead"
:name="nnn"
:my-list="myList"
:my-placeholder="myPlaceholder"
@toFather="updateMessage"> //父组件更新数据
</test>
</div>
</template>
<script>
import test from './Test.vue'
export default {
components:{
test
},
data(){
return{
myHead: true,
nnn: '你好',
myList:[{
value: '1',
label: '你好世界'
},{
value: '2',
label: '333333'
}],
myPlaceholder:"你猜猜我是啥子",
message: '',
}
},
methods:{
updateMessage(res){
this.message = res;
alert(this.message);
}
}
}
</script>
<style scoped>
</style>