一、父组件调用子组件方法
父组件代码 parent.vue
<template>
<div>
<button @click="parentFun">{{msg}}</button>
<child ref="child"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'parent',
data () {
return {
msg: '我是父组件按钮'
}
},
components: {
child,
},
methods:{
parentFun(){
this.$refs.child.childFun();
}
}
}
</script>
<style scoped>
</style>
子组件代码 child.vue
<template>
<div>
我是子组件
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
msg: ''
}
},
methods:{
childFun(){
console.log('我是子组件方法')
},
}
}
</script>
<style scoped>
</style>
点击“我是父组件按钮” 会调用子组件 childFun() 方法
二、父组件向子组件传参
父组件代码 parent.vue
<template>
<div>
<child ref="child" :msg="msg"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'parent',
data () {
return {
msg: '我是父组件按钮参数'
}
},
components: {
child,
},
methods:{
}
}
</script>
<style scoped>
</style>
子组件代码 child.vue
<template>
<div>
我是子组件
</div>
</template>
<script>
export default {
name: 'child',
props:{
msg:String
},
data () {
return {
}
},
methods:{
},
created(){
console.log(this.msg)
}
}
</script>
<style scoped>
</style>
把父组件要传的参数绑定到子组件的标签上，父组件用 props 接收参数，并注明参数类型，这样子组件就会获取到了
三、子组件向父组件传值
父组件代码 parent.vue
<template>
<div>
{{msg}}
<child @parentFun="getChildData" ></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'parent',
data () {
return {
msg: ''
}
},
components: {
child,
},
methods:{
getChildData(data){
this.msg = data;
}
}
}
</script>
<style scoped>
</style>
子组件代码 child.vue
<template>
<div>
<button @click="sendParentMsg">我是子组件按钮</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
msg: '我是子组件的参数'
}
},
methods:{
sendParentMsg(){
this.$emit('parentFun',this.msg)
},
}
}
</script>
<style scoped>
</style>
好了，常用的几种父子组件之间的参数传递方法我整理了一些，希望对大家有所帮助