当前位置：首页 > 资讯 > 系统环境

Vue3与Vue2的$emit和$listeners

时间：2025-10-24 19:55 作者：来源：阅读：4
扫一扫，手机访问

摘要：Vue3 attrs中被收集 , 继承属性和事件只需要 <div v-bind=”$attrs”></div> Vue2 attrs，而是收集到attrs” v-on=”$listeners”></div> <!DOCTYPE html> <html lang= en > &

Vue3

attrs中被收集 , 继承属性和事件只需要 <div v-bind="$attrs"></div>

Vue2

attrs，而是收集到attrs" v-on="$listeners"></div>

<!DOCTYPE html>
<html lang= en >

<head>
    <meta charset= UTF-8 >
    <meta name= viewport  content= width=device-width, initial-scale=1.0 >
    <title>Document</title>
    <script src= ./js/vue.global.js ></script>
</head>

<body>
    <div id= app >

    </div>
    <script>
        const app = Vue.createApp({
            template: `
                <base-input 
                    label="用户姓名" 
                    type="text" 
                    placeholder="username" 
                    maxlength="2" readonly 
                    @focus="onFocus"
                    />
               <base-input label="用户密码" type="password" placeholder=" password" maxlength="3" />
            `,
            data() {
                return {

                }
            }
        })
        app.component("base-input", {
            // props: ["label", "type", "placeholder", "maxlength"],
            // props:["label","type"], // 一个两个可以使用，多个就太多了,Vue3没用到的存在$attrs中,包括事件，Vue2事件是存在$listeners中，事件继承需要v-on="$listeners"
            props:["label"],
        //     template: `
        //         <div>
        //             <label>
        //             <span>{{ label }}: </span>
        //             <input
        //                 :type="type"
        //                 />
        //             </label>
        //         </div>
        // `,
            template: `
                <div>
                    <label>
                    <span>{{ label }}: </span>
                    <input
                        v-bind="$attrs"
                        />
                    </label>
                </div>
        `,
        })
        app.mount( #app )
    </script>
</body>

</html>

全部评论(0)

上一篇：vue3 defineEmits：emit is not a function
下一篇：什么是提示词工程（Prompt Engineering）

真快激活码

店铺

推荐商品