Vue通过emit实现子组件给父组件传递数据

男娘i 2023-01-06 15:56 228阅读 0赞

### Vue通过emit实现子组件给父组件传递数据 ###

*  1Vue通过emit实现子组件给父组件传递数据
 *   *  1.1编写一个emit事件
     *  1.2在子组件中绑定emit事件
     *  1.3在使用子组件标签的地方定义对应的方法接收该事件
     *  1.4在父组件中编写对应的方法
     *  1.5整体源码
     *  1.6测试

# 1Vue通过emit实现子组件给父组件传递数据 #

预计实现在输入框中输入数字之后，子组件和父组件中的数据都会变化

## 1.1编写一个emit事件 ##

methods:{ 
                    send() { 
                        this.$emit('sendchange',this.dnum1);//第一个为事件的名字，第二个为传递的数据
                    },
                    send2(){ 
                        this.$emit('send2change',this.dnum2);
                    }
                }

## 1.2在子组件中绑定emit事件 ##

<template id="cpn1">
            <div>
                <h3>数1</h3>
                <p>props:{ { nnum1}}</p>
                <p>data:{ { dnum1}}</p>
                <input type="text" v-model="dnum1" @input="send">
    
                <h3>数2</h3>
                <p>props:{ { nnum2}}</p>
                <p>data:{ { dnum2}}</p>
                <input type="text" v-model="dnum2" @input="send2">
            </div>
        </template>

## 1.3在使用子组件标签的地方定义对应的方法接收该事件 ##

<cpn :nnum1="num1" :nnum2="num2" 
            @sendchange="sendchange" @send2change="send2change"> </cpn> //@后面的就是事件名称

## 1.4在父组件中编写对应的方法 ##

const app = new Vue({ 
                el:"#app",
                data:{ 
                    num1:1,
                    num2:0
                },
                components:{ 
                    cpn
                },
                methods:{ 
                    sendchange(value){ 
                        this.num1=parseInt(value);//此处就可以接收了
                    },
                    send2change(value){ 
                        this.num2=parseInt(value);
                    }
                }
            })

## 1.5整体源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <cpn :nnum1="num1" :nnum2="num2" 
            @sendchange="sendchange" @send2change="send2change"></cpn>
        </div>
        <template id="cpn1">
            <div>
                <h3>数1</h3>
                <p>props:{ { nnum1}}</p>
                <p>data:{ { dnum1}}</p>
                <input type="text" v-model="dnum1" @input="send">
    
                <h3>数2</h3>
                <p>props:{ { nnum2}}</p>
                <p>data:{ { dnum2}}</p>
                <input type="text" v-model="dnum2" @input="send2">
            </div>
        </template>
        <script src="D://VSCode/VueCdn文件/vue.js"></script>
        <script>
            const cpn={ 
                template:"#cpn1",
                data(){ 
                    return { 
                        dnum1:this.nnum1,
                        dnum2:this.nnum2
                    }
                },
                props:{ 
                    nnum1:{ 
    
                    },
                    nnum2:{ 
    
                    }
                },
                methods:{ 
                    send() { 
                        this.$emit('sendchange',this.dnum1);
                    },
                    send2(){ 
                        this.$emit('send2change',this.dnum2);
                    }
                }
            }
            const app = new Vue({ 
                el:"#app",
                data:{ 
                    num1:1,
                    num2:0
                },
                components:{ 
                    cpn
                },
                methods:{ 
                    sendchange(value){ 
                        this.num1=parseInt(value);
                    },
                    send2change(value){ 
                        this.num2=parseInt(value);
                    }
                }
            })
        </script>
    </body>
    </html>

## 1.6测试 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]: /images/20221119/a987e79367984c3c98573cd1bebeb828.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/a59ac1b20a144cca97ca8ca0e45c8824.png