【vue】自定义事件

最新推荐文章于 2024-01-17 10:22:10 发布

richest_qi

最新推荐文章于 2024-01-17 10:22:10 发布

阅读量199

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qzw752890913/article/details/108732887

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

v-model自定义组件

<body>
    <div id="root">
        <base-checkbox v-model="isDone">
    </div>
</body>

import Vue from "vue";

Vue.component("base-checkbox",{
    model:{
        prop:"checked",
        event:"change"
    },
    props:{
        checked:Boolean
    },
    template:'<input type="checkbox"\
                v-bind:checked="checked"\
                v-on:change="$emit(\'change\',$event.target.checked)"\
    >',
    mounted:function(){
        console.log(this.checked);
    },
    updated:function(){
        console.log(this.checked);
    }
})

const vm = new Vue({
    el:"#root",
    data:{
        isDone:true
    }
})

在这里插入图片描述

将原生事件绑定到组件上

v-on:原生事件名称.native，将原生事件绑定到组件上。

<body>
    <div id="root">
        <base-input label="用户名" value="Nicholas" v-on:focus.native="onFocus"></base-input>
    </div>
</body>

import Vue from "vue";

Vue.component("base-input",{
    props:{
        label:String,
        value:String
    },
    template:'<label>\
            {{label}}\
                <input type="text"\
                v-bind="$attrs"\
                v-bind:value="value"\
                v-on:change="$emit(\'change\',$event.target.checked)">\
                </label>',
    methods:{
        onFocus:function(){
            console.log("now is focusing");
        }
    }
})

const vm = new Vue({
    el:"#root",
})

但是，当输入框获得焦点时，控制台并没有打印"now is focusing"这行文本。
这是因为组件base-input的根元素是<label></label>，label元素上不会触发focus事件。
针对以上问题，解决方案如下：

<body>
    <div id="root">
        <base-input label="用户名" value="Nicholas"></base-input>
    </div>
</body>

import Vue from "vue";

Vue.component("base-input",{
    props:{
        label:String,
        value:String
    },
    computed:{
        inputListeners:function(){
            const self = this;
            return Object.assign({},
                this.$listeners,
                {
                    input:function(event){
                        self.$emit("input",event.target.value);
                    },
                    focus:function(){
                        console.log("focusing input");
                    }
                }
                )
        }
    },
    template:'<label>\
            {{label}}\
                <input type="text"\
                v-bind="$attrs"\
                v-bind:value="value"\
                v-on="inputListeners">\
                </label>'
})

const vm = new Vue({
    el:"#root",
})

在这里插入图片描述

sync实现双向数据绑定

<body>
    <div id="root">
        <text-component
            v-bind:title="title"
            v-on:update:title="title=$event"
        ></text-component>
    </div>
</body>

import Vue from "vue";

Vue.component("text-component",{
    props:{
        title:String
    },
    computed:{
        text:function(){
            return this.title
        }
    },
    template:'<div>\
        <span>{{text}}</span>\
        <button v-on:click="handleClick">changeTitle</button>\
    </div>',
    methods:{
        handleClick:function(){
            this.$emit("update:title","world");
        }
    }
})

const vm = new Vue({
    el:"#root",
    data:{
        title:"hello"
    }
})

在这里插入图片描述
上面的

 <text-component
     v-bind:title="title"
     v-on:update:title="title=$event"
 ></text-component>

可简写成，

<text-component v-bind:title.sync="title"></text-component>

在这里插入图片描述

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue】自定义事件

v-model自定义组件<body> <div id="root"> <base-checkbox v-model="isDone"> </div></body>import Vue from "vue";Vue.component("base-checkbox",{ model:{ prop:"checked", event:"change" },
复制链接

扫一扫