VUE学习：vue基础25————自定义事件

最新推荐文章于 2024-10-24 15:43:42 发布

原创最新推荐文章于 2024-10-24 15:43:42 发布 · 263 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 同时被 2 个专栏收录

29 篇文章

订阅专栏

新星计划

15 篇文章

订阅专栏

本文介绍了Vue中如何创建自定义组件，展示如何通过自定义事件实现父子组件间的通信，并重点讲解了自定义事件的使用和自定义修饰符的应用实例。

提示：
本文为VUE栏目：VUE学习：vue基础24————自定义事件

VUE学习：VUE学习：vue基础24————自定义事件

前言
自定义事件

前言

本文vue框架中指令。

提示：以下是本篇文章正文内容，下面案例可供参考

自定义事件

自定义的组件和vm实例的关系

在vue中，每个自定义组件其实都是一个单独的vue实例。他们和new Vue基本一致。在当前页面中，自定义的组件和vm实例他们的关系：vm是info的父级。

<body>
<div id="app">
   <info></info>
   <info2>不，你不是</info2>
   <info3></info3>
   <info4 test2="我是自定义属性"></info4>
   <info4 :test2="msg"></info4>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         msg:"你猜猜我是谁"
      },
      methods: {},
      components:{
         info:{
            /*每个组件中可用的属性和Vue实例基本一致*/
            template:'<div><h3>你好，世界</h3></div>'
         },
         info2:{
            template:'<div><h3><slot>我是插槽默认值</slot></h3></div>'
         },
         info3:{
            template:'<div><h3>{{test}}</h3></div>',
            data(){
               return {
                  test:'你好，世界test'
               }
            }
         },
         info4:{
            /*通过自定义属性的方式实现父级向子级的数据通信*/
            template:'<div><h3>{{test2}}</h3></div>',
            props:['test2']
         }
      }
   });
</script>

自定义事件

1.当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。

2.$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。

ps:父级向子级通信时使用props属性传值的方式实现。

自定义事件1

<body>
<div id="app">
   <parent></parent>
</div>
</body>
<script>
   let son={
      template:'<div><button @click="getCount">{{count}}</button></div>',
      data(){
         return {
            count:0
         }
      },
      methods:{
         getCount(){
            this.count++;
            if(this.count>10){
               this.$emit('cha');
            }
         }
      }
   }
   let parent={
      template: '<div><p>{{total}}</p><son @cha="getTotal"></son></div>',
      components: {
         son
      },
      data(){
         return {
            total:0
         }
      },
      methods:{
         getTotal(){
            this.total++;
         }
      }
   }
   let vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components:{
         parent
      }
   });
</script>

在这里插入图片描述

自定义事件2：自定义修饰符

<body>
  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
      el: '#app',
      data: {
        info: ''
      },
      methods: {
        handle: function(event){
          console.log(event.keyCode)
        }
      }
    });
  </script>
</body>