父组件如下
<template>
<div id="app">
<child msg= "我是父组件给子组件传值的" ref="headerInfo"></child>
<button @click="btn()">点击</button>
</div>
</template>
<script>
import child from "../components/child"
export default {
name:'index',
components:{
child
},
data() {
return {
message: '页面加载于 ',
}
},
methods: {
btn(){
this.seen=!this.seen;
this.$refs.headerInfo.headerInfo();
}
},
}
</script>
子组件
<template>
<div class="chile">我是子组件 -----父组件对我说-----{{msg}}</div>
</template>
<script>
export default {
name:"child",
props:{
msg:{
type:String,
}
},
data() {
return {
}
},
methods: {
headerInfo(){
alert("父组件调用子组件")
}
},
}
</script>
