Vue父组件调用子组件函数实现
时间：2021-12-11 09:12:37|栏目：vue|点击： 次
Vue父组件调用子组件的函数
父组件通过事件调用子组件的函数。例如父组件通过 点击事件 让子组件发请求。
文章中的项目已经通过脚手架去创建。
DEMO:
Father.js
<template>
<div>
<div>
<son ref="son"></son>
<input type="button" value="点击" @click="useSonFun">
</div>
</div>
</template>
<script>
import son from './son'
export default {
components:{
son
},
data(){
return{
}
},
methods: {
useSonFun(){
this.$refs.son.say();//给 子组件 一个ref,通过ref去调用子组件中的函数
}
},
}
</script>
Son.js
<template>
<div>
<h1>SON</h1>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
say(){//需要父组件去调用的子组件函数
console.log("SON COMPONENT");
}
},
}
</script>
效果图
父组件调用子组件函数，可以使用在父组件通过点击发请求，根据点击事件，子组件也发请求。可以区别于 父组件点击发请求，获取到数据，再把数据通过组件传值的方式传给子组件。
Tips:
Father.js:
this.$refs.son.say(括号内可以将父组件的数据传到子组件);
Son.js:
say(接收父组件传到子组件的数据){
//对数据的使用
}
上一篇：antd中table展开行默认展示,且不需要前边的加号操作
栏 目：vue
下一篇：Vue中"This dependency was not found"问题的解决方法
本文标题：Vue父组件调用子组件函数实现
本文地址：http://www.codeinn.net/misctech/186537.html
