1、子组件School.vue
<template>
<!-- 组件一 -->
<div class="demo">
<h2>---------【School.vue】子组件---------</h2>
<h2>学校名称:{
{ schoolName }}</h2>
<h2>学校地址:{
{ address }}</h2>
<button @click="showName1">点击把【学校和地址】传给父组件</button>
<h2></h2>
</div>
</template>
<script>
// 把组件暴露出去,方便引入 Vue.extend可以省略
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "School",
data() {
return {
schoolName: "清华大学",
address: "北京",
};
},
methods: {
showName1() {
this.$emit('getInfo',this.schoolName,this.address);
// alert("ok");
},
},
};
</script>
<style>
.demo {
background-color: antiquewhite;
border: 1px red solid;
padding-left: 10px;
}
</style>
2、父组件App.vue
<template>
<div id="myapp">
<School @getInfo="getInfo"> </School>
<h2>---------【App.vue】父组件---------</h2>
<h2>学校名称:{
{ appSchoolName }}</h2>
<h2>学校地址:{
{ appAddress }}</h2>
</div>
</template>
<script>
// 引入组件
import School from "@/components/School.vue";
// 注册组件
export default {
name: "App",
components: {
School,
},
data() {
return {
appSchoolName:"",
appAddress: "",
};
},
methods: {
getInfo(a,b) {
this.appSchoolName=a;
this.appAddress=b;
// --------- 可以往数组里边放了
},
},
};
</script>
<style scoped>
#myapp {
border: 1px rgb(134, 0, 0) dashed;
/* height: 400px; */
padding-top: 20px;
padding-left: 10px;
/* background-color: aqua; */
}
</style>