vue之父子组件之间的通讯

---

一、自定义组件

子组件

<template>
    <div>
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

父组件使用子组件

<template>
    <div>
        <my-child></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/MyChild'

    export default {
        components: {
            MyChild
        }
    }
</script>

二、父子组件之间的通讯

1.父组件到子组件的通讯

子组件接收使用父组件的数据或方法

（1）通过props传递数据

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

<!-- 子组件 -->
<template>
    <div>
        <span>{{ parentMessage }}</span>
    </div>
</template>

<script>
    export default {
        props: {
            parentMessage: {
                type: String,
                default: '默认显示的信息'
                // require: true // 必填
            }
        }
    }
</script>

<!-- 父组件 -->
<template>
    <div>
        <my-child :parentMessage="message"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/MyChild'

    export default {
        components: {
            MyChild
        },
        data() {
            return {
                message: "父组件的消息"
            }
        }
    }
</script>

Prop 的类型type：
支持String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。

单项数据流：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

（2）通过$on传递父组件方法

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

子组件使用$emit 发送

<!-- 子组件 -->
<template>
    <div>
        <button @click="childEvent">点击我将子组件调用父组件方法</button>
    </div>
</template>

<script>
    export default{
        methods:{
        	childEvent(){
          		this.$emit('childEvent');
      		}
  		}
    }
</script>

<!-- 父组件 -->
<template>
    <div>
        <my-child @childEvent="parentMethod"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/common/MyChild'

    export default {
        components: {
            MyChild,
        },
        methods: {
            parentMethod() {
                alert(this.parentMessage)
            }
        }
    }
</script>

2.子组件到父组件的通讯

父组件接收使用子组件的数据或方法。

（1）通过$emit 传递父组件数据

与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用。

<!-- 子组件 -->
<template>
    <div>
        <button @click="childEvent">点击我将子组件调用父组件方法</button>
    </div>
</template>

<script>
    export default{
        methods:{
        	childEvent(){
          		this.$emit('childEvent','data');
      		}
  		}
    }
</script>

<!-- 父组件 -->
<template>
    <div>
        <my-child @childEvent="parentMethod"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/common/MyChild'

    export default {
        components: {
            MyChild,
        },
        methods: {
            parentMethod(data) {
                alert(this.parentMessage + data)
            }
        }
    }
</script>

（2）通过refs获取

可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，可以使用refs来访问这个 实例

this.$refs.usernameInput