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

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

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

  • 前言
  • 自定义事件
    • 自定义的组件和vm实例的关系
    • 自定义事件
      • 自定义事件1
      • 自定义事件2:自定义修饰符


前言

本文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:'

你好,世界

'
}, info2:{ template:'

我是插槽默认值

'
}, info3:{ template:'

{ {test}}

'
, data(){ return { test:'你好,世界test' } } }, info4:{ /*通过自定义属性的方式实现父级向子级的数据通信*/ template:'

{ {test2}}

'
, props:['test2'] } } });
script>

自定义事件

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

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

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

自定义事件1

<body>
<div id="app">
   <parent>parent>
div>
body>
<script>
   let son={
       
      template:'
'
, data(){ return { count:0 } }, methods:{ getCount(){ this.count++; if(this.count>10){ this.$emit('cha'); } } } } let parent={ template: '

{ {total}}

'
, components: { son }, data(){ return { total:0 } }, methods:{ getTotal(){ this.total++; } } } let vm = new Vue({ el: "#app", data: { }, methods: { }, components:{ parent } });
script>

VUE学习:vue基础25————自定义事件_第1张图片

自定义事件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>

VUE学习:vue基础25————自定义事件_第2张图片

你可能感兴趣的:(新星计划,vue.js,vue.js)