自定义事件

API

在组件标签v-on绑定的事件是自定义事件

 <div id="root">
     <child @click="handleClick"></child> <!--这里click是自定义事件-->
 </div>
 ​
 <script type="text/javascript">
     Vue.component('child', {
         template: '<button>Child</button>',
     })
 ​
     var vm = new Vue({
         el: '#root'
         methods: {
             handleClick() {
                 alert('click')
             }
         }
     })
 </script>

上面这种情况，当点击子组件时并不会触发handleClick()事件，因为此时的click并非原生的点击事件，而是一个自定义事件。

要想触发组件标签中的click事件需要通过子组件$emit来派发

 <div id="root">
     <child @click="handleClick"></child>
 </div>
 ​
 <script type="text/javascript">
     Vue.component('child', {
         template: '<button @click="handleChildClick">Child</button>', // 这里的click是原生事件
         methods: {
             handleChildClick() {
                 this.$emit('click')
             }
         }
     })
 ​
     var vm = new Vue({
         el: '#root'
         methods: {
             handleClick() {
                 alert('click')
             }
         }
     })
 </script>

上面代码中，子组件内的click是原生点击事件，通过$emit派发click自定义事件触发父组件的handleClick()

使自定义事件变为原生事件

使用.native修饰符把自定义事件变为原生事件

 <div id="root">
     <child @click.native="handleClick"></child> <!--自定义事件添加了native修饰符变原生事件-->
 </div>
 ​
 <script type="text/javascript">
     Vue.component('child', {
         template: '<button>Child</button>',
     })
 ​
     var vm = new Vue({
         el: '#root'
         methods: {
             handleClick() {
                 alert('click')
             }
         }
     })
 </script>

上面代码中，自定义事件click添加了.native修饰符，使其变为原生事件，从而触发handleClick()。

自定义事件名会自动变小写

当使用camelCase（驼峰）命名的自定义函数

 this.$emit('myEvent')

则监听这个名字的 kebab-case（烤串） 版本是不会有任何效果的：

 <!-- 没有效果 -->
 <my-component v-on:my-event="doSomething"></my-component>

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case（烤串） 的事件名。

title: 兄弟组件传值
date: 2020-02-04 13:04:32
permalink: /pages/809f4582d9ca9552
categories: 
  - 《Vue》笔记
  - 组件
tags: 
  - null
author: 
  name: xugaoyi
  link: https://github.com/xugaoyi

兄弟组件传值

子组件1中把值传到父组件,父组件获取值传入子组件2

父组件：

 <子组件1 @方法名x="方法名y"></子组件1>
 ​
 <子组件2 :值名称x="值x"></子组件2 >
 ​
 data() {
     return {
      值x: ''
     }
 },
 methods: {
     方法名y(值) {
         this.值x = 值
     }
 }
 ​

子组件1：

 this.$emit('方法名x', 值) // 传出值

子组件2：

 props: {
     值名称x: { // 接收父组件传入值
         type: String,
         default: ''
     }
 }