Vue3自定义事件

本文转载自查看原文 2021-12-18 15:33 169 Vue

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue3 学习笔记 (三)——vue3 自定义指令 vue3自定义Hooks vue3 中的自定义ref Vue自定义事件 vue 的自定义事件 Vue自定义事件 Vue3手册译稿 - 深入组件 - 自定义事件 vue事件及自定义事件 Vue2/Vue3 自定义组件库 Vue3自定义事件中，子组件有返回参数，父组件也有参数的处理方法