Vue3自定义事件

https://v3.cn.vuejs.org/guide/component-custom-events.html

可以通过 emits 选项在组件上定义发出的事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <body>
        
        <div id="v-model-example" class="demo">
            <p>First name: {{firstName}}</p>
            <p>Last name:{{lastName}}</p>
            <user-name
            v-model:first-name='firstName'
            v-model:last-name='lastName'
            ></user-name>
        </div>
        
        <script type="text/javascript">
            const UserName = {
                props:{
                    firstName : String,
                    lastName : String
                },
                template:`
                <input 
                type="text"
                :value="firstName"
                @input="$emit('update:firstName',$event.target.value)">
                
                <input
                type="text"
                :value="lastName"
                @input = "$emit('update:lastName',$event.target.value)"
                >
                `
            };
            
            
            const HelloVueApp = {
                components:{
                    UserName,
                },
                data(){
                    return {
                        firstName:'John',
                        lastName:'Doe'
                    }
                }
            }
            
            Vue.createApp(HelloVueApp).mount('#v-model-example')
        </script>
    </body>
</html>