vue 父子组件通信

组件目录结构

parent child

API： $emit、 $on、 $refs、 props

1、父子组件通信

需求合理性我们先不考虑，demo就为了搞清怎么通信，我们要求： 1、父组件传值给子组件，同时父组件input输入框value也可同步到子组件 2、点击子组件加减子组件数字跟随变动， 父组件input value跟随变动，

父组件

<template>
<div>
    <input type="text" v-model="count">
    <add-child :count="count" ref='addChild' @childAdd="add"   @childReduce="reduce"></add-child>
</div>
    
</template>
<script>
import addChild from '@/components/add'
export default {
    data(){
        return {
            count: 0
        }
    },
    methods:{
        add(count){
            this.count = count
        },
        reduce(count){
            this.count = count
        }
    },
    watch: {
        count (val) {
           return this.count = Number(val)
        }
    },
    components:{
        addChild
    }
}
</script>
复制代码

子组件

<template>
<div>
    <span class="button" @click="add">+</span>
    <span class="button" @click="reduce">-</span>
</div>
    
</template>

<script>
export default {
    props:{
        count:{
            //约定数据类型
            type: Number,
              //默认值
            default: 0
        }
    },
    methods:{
        add(){
            this.$emit('childAdd',this.count + 1)
        },
        reduce(){
            this.$emit('childReduce', this.count - 1)
        },
        
    }
}
</script>
复制代码

父组件引入子组件

import addChild from '@/components/add'
复制代码

父子件注册子组件

//并在父组件内注册子组件
components:{
    addChild
}
复制代码

父组件html

// v-bind:count="count" 父组件传递值给子组件，v-on:add="add"监听子组件 (用v-bind和v-on有助于更好的理解，熟悉了我们可以简化)
    <!-- <add-child v-bind:count="count" ref='addChild' v-on:toast="toast" v-on:parentAdd="add"   v-on:parentReduce="reduce"></add-child> -->
    <add-child :count="count" @add="childAdd"  @reduce="childReduce"></add-child>
复制代码

子组件接收父组件传递的值

props:{
        count:{
            //约定数据类型
            type: Number,
              //默认值
            default: 0
        }
    }

接收父组件传递的值count
复制代码

发送事件

 methods:{
        add(){
            this.$emit('childAdd',this.count + 1)
        },
        reduce(){
            this.$emit('childReduce', this.count - 1)
        }
    }

//父组件监听子组件指令childAdd、childReduce 并触发父组件方法add、reduce
复制代码

以上父组件穿值给子组件，子组件触发事件给父组件搞定，总结一下，父组件v-bind:count="count"穿值给子组件，子组件props：接收（props接收的父组件的值相当于子组件内定义data只不过不能直接修改疑问可搜索子组件为什么不能直接修改父组件值），继续，子组件定义方法并执行emit指令定义指令名字“childAdd、childReduce”，当子组件触发add、reduce方法触发emit并发指令给父组件，父组件v-on:childAdd（简写@childAdd） 监听并触发父组件方法，如下图

接下来我们再用$on,监听指令不在dom内，直接写在js中 上图

标注忽略了 child组件ref="addChild" 和普通获取操作dom一样

我们再看看console this.refs

这样我们就可以做到和dom内监听子组件一样的效果

当然这样写感觉恶心了不少，不过我是为了引出父组件直接操作子组件方法做个引子

给父组件加一个功能可以改变子组件显示值（还是那句话不管合不合理我们只看怎么实现）

同样还是用ref来获取子组件，这样可以直接触发子组件方法。

ok父子组件通信算是说完了， 预告：明天继续 兄弟组件通信