子组件
<template>
<div class="chile">我是子组件 -----父组件对我说-----{{msg}}
<br />
<input type="button" @click="sendfuMsg" value="给父组件传递值">
<button @click="btnzf">btnzf</button>
<button @click="toParent">向父组件传值</button>
</div>
</template>
<script>
export default {
name:"child",
props:{
msg:{
type:String,
}
},
data() {
return {
msga:"我是子组件呐"
}
},
methods: {
headerInfo(){
alert("父组件调用子组件")
},
sendfuMsg(){
//子组件传值给父组件 第一个参数是函数 第二次是值
this.$emit('func',this.msga)
},
btnzf(){
//子组件直接调用父组件的方法
this.$parent.btn();
},
toParent() {
this.$emit('event1', this.msga)
}
},
}
</script>
父组件
<template>
<div id="app">
<div v-if="seen">
<ol>
<li v-for="(todo,index) in todos" :key="index">
{{todo.text}}
</li>
</ol>
</div>
<input type="text" v-model="message">
<child @event1="change($event)" @func="getMsgFormSon" 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: '页面加载于 ',
seen:true,
todos:[
{text:"学习javascript"},
{text:"学习vue"},
{text:"整个牛项目"}
]
}
},
methods: {
btn(){
this.seen=!this.seen;
this.$refs.headerInfo.headerInfo();
},
getMsgFormSon(data){
this.message = data
console.log(this.message)
},
change(data) {
console.log(data)
}
},
}
</script>
