案例一
父组件
<template>
<div>
<div @click="click">点击父组件</div>
<child ref="child"></child>
</div>
</template>
<script>
import child from "./groundCrudeOilImg";
export default {
methods: {
click() {
this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
this.$refs.child.callMethod() // 方法2:直接调用
},
},
components: {
child,
}
}
</script>
子组件
<template>
<div>子组件</div>
</template>
<script>
export default {
mounted() {
this.monitoring() // 注册监听事件
},
methods: {
monitoring() { // 监听事件
this.$on('childMethod', (res) => {
console.log('方法1:触发监听事件监听成功')
console.log(res)
})
},
callMethod() {
console.log('方法2:直接调用调用成功')
},
}
}
</script>
案例二
父组件
<template>
<div id="app">
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<aaa ref="header"></aaa>
<hr>
首页组件
<button @click="getChildData()">获取子组件的数据和方法</button>
</div>
</div>
</template>
<script>
/*
父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
props:['title']
props:{
'title':String
}
3.直接在子组件里面使用
父组件主动获取子组件的数据和方法:
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
子组件主动获取父组件的数据和方法:
this.$parent.数据
this.$parent.方法
*/
import aaa from "./aa.vue";
export default {
name: 'App',
data(){
return {
msg:'我是一个首页组件',
title:'首页111'
}
},
components:{
'aaa':aaa
},
methods:{
run(){
alert('我是首页组件的run方法');
},
getChildData(){
// 父组件主动获取子组件的数据:
alert(this.$refs.header.msg);
// 父组件主动获取子组件的方法
this.$refs.header.run()
// 父组件主动获取子组件的方法返回值:
alert(this.$refs.header.run())
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件
<template>
<div>
<h2>我是头部组件</h2>
<button @click="getParentData()">获取子组件的数据和方法</button>
</div>
</template>
<script>
export default {
name: 'aa',
data(){
return{
msg:'子组件的msg'
}
},
methods:{
run(){
alert('我是子组件的run方法')
return"我是子组件的run方法"
},
getParentData(){
// 子组件主动获取父组件的数据和方法:
this.$parent.msg
this.$parent.方法
alert(this.$parent.msg);
this.$parent.run();
}
}
};
</script>
<style lang="scss" scoped>
</style>
网友评论