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>