vue入坑教程(三)vue父子组件之间互相调用方法以及互相传递数据

2023-07-11,,

1、父组件调用子组件的方法

父组件:

<template>
<div>
<button v-on:click="clickParent">点击</button>
<child1 ref="child1"></child1>
</div>
</template> <script>
import Child1 from './child1';
export default {
name: "parent",
components: {
child1: Child1
},
methods: {
clickParent() {
// this.$refs.child1.$emit('click-child', "high");
this.$refs.child1.handleParentClick("ssss");
}
}
}
</script>

子组件:

<script>
export default {
name: "child1",
props: "msg",
methods: {
handleParentClick(e) {
}
}
}
</script>

2、子组件调用父组件的方法

父组件:

<template>
<div class="wrapper">
<cp_action @parentMethod="macSelect"></cp_action>
</div>
</template>
<script>
import ../components/action //引入子组件
export default{
components:{
cp_action
},
method:{
macSelect(){
//方法体
alert(123);
}
}
}
</script>

子组件:

<template>
<div class="bet-action">
<span class="mac-select" @click="childMethod">机选</span>
</div>
</template>
<script>
export default{
methods: {
childMethod() {
console.log('请求父组件方法');
this.$emit('parentMethod'); //使用$emit()引入父组件中的方法
}
},
}
</script>

3、父组件向子组件传递数据(可以通过props属性来实现)

父组件:

vue入坑教程(三)vue父子组件之间互相调用方法以及互相传递数据的相关教程结束。

《vue入坑教程(三)vue父子组件之间互相调用方法以及互相传递数据.doc》

下载本文的Word格式文档,以方便收藏与打印。