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');
}

注意

1. 若想让自定义事件只能触发一次，可以使用once修饰符，或者$once方法。

2. 组件上也可以绑定原生 DOM 事件，需要使用native修饰符

   <Child @click.native="xxx"></Child>
   

3. 通过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，打开时组件未祖册，无法设置