父组件调用子组件



子组件调用父组件

使用$parent

父组件

<child></child>

important './component/child'
components:  {child: child}

helloWord() {console.log("hello word!")}

子组件

<button @click="sayHello">say hello</button>
sayHello() {
	this.$parent.helloWord();
}

使用$emit(param1,param2)

this.$emit(参数1,参数2,参数3,参数...) 第一个参数是要调用的方法名用''括起来，后面都是参数，例如 this.$emit('fatherFun',true,1,'要传递的参数文本')

父组件

注：父组件用:fatherFun='父组件函数名"

<child :fatherFun="handleFatherFun"><child>

子组件

<button @click="childClick">点击调用父组件函数</button>

childClick() {//子组件点击
	this.$emit('fatherFun',true,1,'参数文本');//父组件的函数名
}


props

父组件 

注：父元素使用props传值，父元素引用变量用命名-连接，不用驼峰 可以自定义type

<child :father-fun="handleFatherFun"></child>

子组件

<div @click="childCheck">点击调用父组件函数</div>
props: {
	fatherFun: {type: Function}
},
methods: {
	childClick() {
  	this.fatherFun();//父组件传过来的函数
  }
}

$parent

this.$prent.fatherFun();