vue父组件如何调用子组件里面的方法
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧!父组件代码:<template><div class="parent"><div class="parent-wrapper"><button @click="parentMethod"&g...
·
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧!
父组件代码:
<template>
<div class="parent">
<div class="parent-wrapper">
<button @click="parentMethod">我是父组件的按钮,但是我可以调用子组件的方法</button>
</div>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from '@/components/test/Child'
export default {
name: 'parent',
data () {
return {
}
},
components: {
Child
},
methods: {
parentMethod(){
this.$refs.child.childMethod();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.parent-wrapper {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 50px;
}
</style>
子组件代码:
<template>
<div class="child">
<div class="child-wrapper">
<button @click="childMethod">这是子组件的按钮</button>
</div>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
}
},
methods: {
childMethod() {
alert("我是子组件的方法!")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child-wrapper {
width: 300px;
height: 300px;
border: 1px solid blue;
margin: 50px;
}
</style>
代码解析:
1、最重要的部分是在父组件调用子组件的标签上,定义了一个ref属性:child,通过这个属性,可以获取到子组件里面的的属性和方法。
2、在父组件的方法 parentMethod 执行的时候,使用:this.$refs.child.childMethod(); 来调用子组件的方法。
其实这个很简单,用过一次就知道了。希望能帮到有需要的朋友。
效果图
点击父组件按钮后:
更多推荐
已为社区贡献30条内容
所有评论(0)