Vue（七）：组件的自定义事件

3、组件自定义事件

　　1）、大小写的问题
　　vue官网很是强调这个问题呀，基本能说一次的都要说一次。中心思想就是要你使用kebab-case的命名方式。当然，希望大家注意，指的是事件名，而不是方法名。举一个简单的栗子吧

<base-span @my-event="fun1"></base-span>  //父级调用代码，调用fun1方法，当然，也可以写一些简单的js表达式
fun1(){alert("help");}  //fun1方法

this.$emit('my-event');  //子级触发方式，如果父级调用的fun1有参数，可在事件名后面添加要传入的参数

　　2）、v-model
　　v-model主要利用的是组件中的value属性和input事件，但是有时候，value值和input事件有其他的作用，比如单选框和复选框，这个时候我们就需要自定义v-model。主要引用的就是model属性，设置默认绑定的值和事件。上个官网的栗子：

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)"
    >
  `
})  //v-model绑定的值就是bool值了

　　3)、将原生事件绑定到组件
　　当我们调用一个组件时，比如说我想监控它原生的事件怎么办呢？在原生的事件后面加上.native,比如@focus.native=""。但是如果该组件的根元素没有focus事件，但是其他元素里面有，我们想监听那个元素的focus事件怎么办呢？使用$listeners属性，它和我们上篇谈到的$attrs差不多，只不过$attrs是包含了父级的所有属性，而$listeners是包含了父级所有的事件。使用方法也一样，直接绑定到你想绑定的元素上面，就可以调用对应的事件了。

<div><input v-on="$listeners"></div>  //这是template中的代码，div代表根元素

Vue（七）：组件的自定义事件

猜你喜欢