Vue 子组件与父组件传值
大约 2 分钟约 626 字
Vue 子组件与父组件传值
一、通过父组件给子组件传递函数类型的 props 实现
注意:通过 props 父子组件的设置接收的名称要一样,绑定的名字(:getChildInfo
)和接收的一样(props: ['getChildInfo']
),当调用的时候使用 this.xxx.xx 范围要对应。
父组件:
<Child :getChildInfo="getChildInfo"></Child>
子组件:
<button @click="sendChildInfo"></button>
props: ['getChildInfo']
sendChildInfo() {
this.getChildInfo(数据);
}
二、通过父组件给子组件绑定自定义事件实现
第一种方式
父组件:
<child @haha="test"></child>
子组件:
<button @click="send"></button>
send() {
this.$emit('haha');
}
第二种方式
父组件:
<child ref="xxx"></child>
mounted() {
this.$refs.xxx.$on('haha', this.test);
}
子组件:
<button @click="send"></button>
send() {
this.$emit('haha');
}
注意
若想让自定义事件只能触发一次,可以使用
once
修饰符,或者$once
方法。组件上也可以绑定原生 DOM 事件,需要使用
native
修饰符<Child @click.native="xxx"></Child>
通过
this.$refs.xxx.$on('haha', 回调)
绑定自定义事件时,回调要么配置在 methods 中,要么用箭头函数,否则 this 的指向会出问题。
其他参考
一,子组件主动触发事件将数据传递给父组件
1,在子组件上绑定某个事件以及事件触发的函数
子组件代码
<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
<Button type="success" @click="submit"></Button>
</div>
</template>
事件在子组件中触发的函数
submit(){
this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
},
2,在父组件中绑定触发事件
<AuthTree @getTreeData='testData'>
</AuthTree>
父组件触发函数显示子组件传递的数据
testData(data){
console.log("parent");
console.log(data)
},
二,不需要再子组件中触发事件(如点击按钮,create()事件等等)
这种方式要简单得多,
1,子组件中绑定 ref
<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>
</template>
然后在子组件中定义一个函数,这个函数是父组件可以直接调用的。函数的返回值定义为我们需要的数据。
getData(){
return this.$refs.treeData.getCheckedNodes()
},
然后再父组件注册子组件后绑定 ref,调用子组件的函数获取数据
<AuthTree ref="authTree">
</AuthTree>
父组件函数调用
console.log( this.$refs.authTree.getData());
注意:
emits.emit("setAcctStatusPilh",res.data.acctType); //如果组件lazy为true,打开时组件未祖册,无法设置
this.$refs.pilhacctmthlyblginfsgmt.getAcctType(res.data.acctType); //如果组件lazy为false,打开时组件未祖册,无法设置