子组件调用父组件函数
在子组件中可以 通过 emit 函数触发父组件中自定义的事件,通过事件绑定调用父组件函数。
//父组件的html代码
<parent @myEvent="parentFunction">
<child></child>
</parent>
//父组件的js代码 (单文件组件写法)
methods:{
parentFunction: function(){
//codes
}
}
//子组件js代码,
methods: {
callParents: function(){
this.$emit("myEvent",args);
//myEvent是事件名,要与父组件监听(@myEvent)对应,
// args 是要传递参数,这就随便了。想传什么传什么
}
}
父组件调用子组件函数
在父组件中, 通过在子组件上绑定一个 ref 值, 然后直接调用子组件的函数
//父组件的html代码,
<parent>
<child ref="child" ></child> <!-- ref 后面的值是自己定义的 -->
</parent>
//父组件的js代码 (单文件组件写法)
methods:{
parentFunction: function(){
this.$refs.child.childFunction(params);
//注意两个点对应, 一个是自己定义的 ref 值, 二是子组件的函数名
}
}
//子组件js代码,
methods: {
childFunction: function(params){
//codes
}
}