原生事件绑定组件详解

最新推荐文章于 2021-12-06 11:38:01 发布

小菜鸡_

最新推荐文章于 2021-12-06 11:38:01 发布

阅读量158

点赞数

分类专栏： Vue 前端

未经允许不得随意转载，著作权归__盛某人所有

本文链接：https://blog.csdn.net/NaXieNianWoMenYiQ/article/details/105120129

版权

Vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>vue测试</title>
  <script src="js/vue.js"></script>
  <style>

  </style>
 </head>
 <body>
     <div id="app">
		 <!--label props传值-->
		 <!--v-model v-model绑定，：value+@input，这里的@input对lable标签无效对input有效-->
		 <!--click.native是给lable标签绑了一个点击事件-->
		 <!--v-on:focus是给里边的input框添加的-->
        <base-input
            v-model="username"  
            label="基础输入组件" 
            @click.native="handleBaseInputClick"
            v-on:focus="handleBaseInputFocus"
            placeholder="请输入您的名字"
            class="username-input"/>
    </div>
    <script>
        // 注册组件
        // 因为base-input的外层是一个label元素，所以默认情况下使用v-on:focus是无效的，所以需要配合$listeners使用，该属性可以把事件的监听指向组件中某个特定的元素
        // 注意：如果父级的事件添加了.native修饰符，在$listeners中不会体现出来的
        Vue.component('base-input',{
            inheritAttrs: false,
            props: ['label','value'],
            template: `
                <label id="base-label">
                    {{label}}
                    <input v-bind:value="value" v-bind="$attrs" v-on="inputListeners"/>
                </label>
            `,
            data: function() {
                return {
                    
                }
            },
            computed: {
                inputListeners () {
                    var vm = this
                    // `Object.assign` 将所有的对象合并为一个新对象
                    return Object.assign({},
                     // 我们从父级添加所有的监听器，父级标签中所有的原生响应事件
                        this.$listeners,
                        {
                        // 然后我们添加自定义监听器，
       					// 或覆写一些监听器的行为
       					// 这里确保组件配合 `v-model` 的工作
                            input: function () {
                                vm.$emit('input', event.target.value)
                            },
                        //针对父标签上的focus事件
                            focus: function (event) {
                                vm.$emit('focus', '哈哈哈，onfocus了')
                            }
                        }
                    )
                }
            },
            mounted: function(){
                console.log(`$attrs:`)
                console.log(this.$attrs)
                console.log(`$listeners:`)
                console.log(this.$listeners) // 父级添加的所有属性都在这里
            },
            methods: {
                
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            created: function(){
            
            },
            beforeUpdate: function(){
            
            },
            computed: {
                
            },
            beforeUpdate: function () {
                console.log(this.username)
            },
            methods: {
                handleBaseInputFocus: function(ev){
                    console.log(ev+"A")
                },
                handleBaseInputClick: function(ev){
                    console.log(ev.type)
                }
            }
        })
    </script>
 </body>
</html>

小菜鸡_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生事件绑定组件详解

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...
复制链接

扫一扫