vue父子组件通讯

2019年8月20日 199次阅读来源: 我是一个前端

组件目次构造

parent
child

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

1、父子组件通讯

《vue父子组件通讯》

需求合理性我们先不斟酌，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）监听并触发父组件要领，如下图

《vue父子组件通讯》