vue 父子组件通信

快来打我* 2022-01-25 19:19 383阅读 0赞

vue 父子组件通信，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

子组件的 props 选项能够接收来自父组件数据，但由于 props 是单向绑定的，所以只能是父组件向子组件传递，不能子组件向父组件传递

子组件通过触发事件来通知父组件改变数据

代码示例如下

首先定义父组件 parent-component.vue

<template>
        <div>
            <div>
                <label>父组件</label>
            </div>
    
            <div>
                <input type="text" v-model="message" placeholder="请输入内容">
                <button class="size" @click="show">显示</button>    
            </div>
        </div>
    </template>
    
    <script>
    
    export default {
        data (){
            return {
                message: ''        
            }
        },
        methods: {
            show(){
                alert(this.message)
            }
        }
        
    }
    </script>
    
    <style>
    .size {
       width: 200px
    }
    </style>

其次定义子组件 child-component.vue

<template>
        <div>
            <div>
                <label>子组件</label>
            </div>
            <div>
                 <span>来自父组件的消息:{
       {msg}}</span>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        props: ['msg']
    }
    </script>

**父组件向子组件传递数据**

定义完成后，在父组件中引入子组件

<template>
        <div>
            <div>
                <label>父组件</label>
            </div>
    
            <div>
                <input type="text" v-model="message" placeholder="请输入内容">
                <button class="size" @click="show">显示</button>    
            </div>
            <ChildComponent :msg="message"></ChildComponent>
        </div>
    </template>
    
    <script>
    import ChildComponent from './child-component'
    export default {
        components:{
            ChildComponent
        },
        data (){
            return {
                message: ''        
            }
        },
        methods: {
            show(){
                alert(this.message)
            }
        }
        
    }
    </script>
    
    <style>
    .size {
       width: 200px
    }
    </style>

运行后效果如下图，实现了父组件向子组件的单向数据传递

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

**子组件向父组件传递数据**

修改子组件代码如下

<template>
        <div>
            <div>
                <label>子组件</label>
            </div>
            <div>
                 <span>来自父组件的消息:{
       {msg}}</span>
    
                 <br>
                 <input type="text" v-model="text">
                 <button @click="sendMessage">向父组件发送消息</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        props: ['msg'],
        data (){
            return {
                text: ''
            }
        },
        methods: {
            sendMessage(){
                this.$emit('receiveMessage', this.text)
            }
        }
    }
    </script>

修改父组件代码如下

<template>
        <div>
            <div>
                <label>父组件</label>
            </div>
    
            <div>
                <input type="text" v-model="message" placeholder="请输入内容">
                <button class="size" @click="show">显示</button>    
            </div>
            <ChildComponent :msg="message" @receiveMessage='receiveMessage'></ChildComponent>
        </div>
    </template>
    
    <script>
    import ChildComponent from './child-component'
    export default {
        components:{
            ChildComponent
        },
        data (){
            return {
                message: ''        
            }
        },
        methods: {
            show(){
                alert(this.message)
            },
            receiveMessage(message){
                console.log(message)
            }
        }   
    }
    </script>
    
    <style>
    .size {
       width: 200px
    }
    </style>

运行如下

输入框输入 999999，点击按钮，控制台打印出 999999，实现了子组件向父组件通信

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20220126/78c9c3b63288412c89d571db4c1233b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20220126/7f98f7c8e955417dbed7bfc976f98470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2]: /images/20220126/87eb3c4361594300951d74b9e7454d95.png