自定义事件

事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

javascript

JS中
this.$emit('myEvent')

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

html

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

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。事件名必须用短横线命名方式

通过自定义事件传值

在父组件中使用 on(zidingyi-eventName)监听事件，然后在子组件中使用on(yuansheng-eventName)监听事件，然后在子组件中使用emit(eventName) 触发事件，这样就能实现子组件向父组件传值。

javascript

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
      console.log('第'+this.total+'次点击')
    }
  }
})
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 $emit 的第二个参数来提供这个值

javascript

 incrementCounter: function () {
      this.counter += 1
      this.$emit('increment', this.counter)
 }

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值

html

 <button-counter v-on:increment="postFontSize + $event"></button-counter>

或者，如果这个事件处理函数是一个方法：那么这个值将会作为第一个参数传入这个方法：

vue

<button-counter v-on:increment="incrementTotal"></button-counter>

methods: {
  incrementTotal: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

组件上使用v-bind

在组件上使用v-bind，参数是子组件上的父组件传来的prop，（prop中的对象或数组是引用的形式），表达式是父组件上的methods中方法。相当于是借用父组件中的函数，子组件触发事件，调用父组件的函数。

父组件向子组件传入一个函数incrementTotal,子组件设置原生事件click，然后子组件监听click事件，表达式（回调函数）是父组件传来的incrementTotal

javascript

Vue.component('button-counter', {
    props:['incrementTotal'],
    template: '<button v-on:click="incrementTotal">clickMe</button>',
})

Vue实例（父组件）方法 incrementTotal 默认接收一个参数event，event指向子组件触发事件的对象。

相当于原生JavaScript事件回调函数中的event

javascript

box.addEventListener('contextmenu', function(event) {
    console.log('contextmenu', event);
});

javascript

// 定义Vue实例
new Vue({
    el: '#counter-event-example',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function (e) {
            console.log(e)	// PointerEvent{}
        }
    }
})

javascript

<div id="counter-event-example">
    <button-counter v-bind:increment-total="incrementTotal"></button-counter><br>
</div>

子向父传值，通过传递函数

html

<body>

	<div id="app">
        <reine :change-num="changeNum"></reine>
    </div>  

</body>

javascript

<script type="module">
	
    Vue.component('reine',{
        props:['changeNum'],
        // 父向子传递函数 子组件调用函数改变父数据 不传参数默认传递一个event事件对象
        template:`
                <div>
                    <button @click="changeNum(2)"> reine </button>
                </div>
            `,
    })

    // 定义Vue实例
    new Vue({
        el:"#app",
        data:{
            num:1,
        },
        methods:{
            changeNum(num){
                this.num += num;
                console.log(num);
            },
        },
    })  
</script>

组件上使用v-model

组件内input需要满足条件：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

javascript

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

v-model 在组件上的使用

html

<custom-input v-model="searchText"></custom-input>

<!-- 上面的写法 等价于 下面的写法 -->
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

javascript

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 的时候：

javascript

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

子向父传值

通过父向子传递函数，子组件调用函数改变父的数据

子组件在回调函数中如果不传参数，默认传递一个event对象。

javascript

Vue.component('reine',{
    props:['num','changeNum'],
    // 父向子传递函数 子组件调用函数改变父数据
    template:`
			<div>
				<button @click="changeNum(10)"> reine:{{num}}</button>
			</div>
		`,
})

javascript

// 定义Vue实例
new Vue({
    el:"#app",
    data:{
        num:1,
    },
    methods:{
        changeNum(num){
            this.num += num;
        },
    },
})

html

<div>父向子传递函数 子组件调用函数改变父数据</div>
<reine :num="num" :change-num="changeNum"></reine>

子组件设置自定义事件改变父数据

javascript

Vue.component('hanser',{
    // 子组件设置自定义事件改变父数据
    props:['num'],
    template:`
			<div>
				<button @click='func'>hanser:{{num}}</button>
			</div>
		`,
    methods:{
        func(){
            // 子组件触发自定义事件
            this.$emit('hanser-event',20);
        },
    }
})

父组件：App.vue

vue

<template>
    <!-- :num="num" 前边的count是给子组件传的属性，后边的num是父组件date中的数值 -->
    <div>子组件设置自定义事件改变父数据</div>
	<!-- @hanser-event="changeNum" 父组件添加事件hanser-event监听，后边的changeNum是父组件date中的函数 -->
    <hanser :num="num" @hanser-event="changeNum"></hanser>
</template>
<script>
    // 定义Vue实例
    new Vue({
        el:"#app",
        data:{
            num:1,
        },
        methods:{
            changeNum(num){
                this.num += num;
            },
        },
    })
</script>

修饰符

.native修饰符

作用：
.native修饰符用于在自定义组件上监听原生DOM事件如click
举例说明，一个自定义的Button组件，使用.click.native可以确保无论点击组件内的哪个元素，都能触发预设的事件处理函数，提高组件的灵活性和重用性

想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

javascript

<base-input v-on:focus.native="onFocus"></base-input>

在有的时候这是很有用的，不过在你尝试监听一个类似 <input> 的非常特定的元素时，这并不是个好主意。

比如上述 <base-input> 组件可能做了如下重构，所以根元素实际上是一个 <label> 元素：

html

<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。

为了解决这个问题，Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：

javascript

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以配合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的：

javascript

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

现在 <base-input> 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 <input> 元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用 .native 监听器。

.sync修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

javascript

eventFunc(){
    const doc = {
        title:"目前在虚研科技旗下成立“兰音工作室”，以虚拟音乐人的身份活动",
    };
    this.$emit('update:title', doc)
}

javascript

new Vue({
    el:"#app",
    data:{
        doc:{
            title:"Hanser"
        }
    }
})

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

javascript

<text-document
  //自动向子组件传递了数据title
  v-bind:title="doc.title"	
  // 自动向子组件监听自定义事件，事件的名字是update:title，
  //并且把事件的参数newTitle赋值给父组件数据doc.title(更新)
  v-on:update:title="doc.title = $event"	
></text-document>

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

javascript

<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

javascript

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

使用案例

sync的使用

src->App.vue

vue

src->components->Child.vue

vue

实例的事件方法

Vue实例与组件实例

给Vue.prototype设置属性，一般自定义属性前边加$

javascript

Vue.prototype.$useName = "zhangsan";

组件中的vc（VueComponent函数返回的）对象在Vue.prototype的原型链上

Vue.prototype对象中有什么属性，那么组件的实例vc就拥有什么属性

javascript

vc也是通过New Vue生成的(底层)
所以vc.__proto__.__proto__ 不等于 Vue.prototype
vm.__proto__ == Vue.prototype

javascript

$emit()方法是Vue.prototype上的属性
Vue实例使用 vm.$emit()
Vue.prototype 在 vc (VueComponent的实例) 的原型链上，所以组件实例可以直接使用 vc.$emit()

设置一个事件
vc.$emit('my-event',argument1,argument2...) 
参数：第一个参数是 自定义事件名
	 第二个参数是 传递给回调函数的参数
     第三个参数是 传递给回调函数的参数


1 在子组件中方法fun中设置自定义事件,argument1设定值给父元素的方法设置参数。
method:{
    fun(){
        this.$emit("my-event",argument1,argument2);
    }
}

2 在子组件中template模版中触发自定义事件
<button @click="fun"></button>
3 在html中监听自定义事件
<my-component v-on:my-event="doSomething(argument1,argument2)"></my-component>

vm.$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

javascript

vm.$emit( eventName, […args] )
参数：	{string} eventName
	   [...args] 实参

javascript

只配合一个事件名使用 $emit：
Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})

组件上监听并设置事件

html

<body>
    <div id="app">
        <hanser ></hanser>
    </div>
</body>

javascript

Vue.component("hanser",{
    data(){
        return{
            num:1
        }
    },
    template:(`
            <button @click="my">ClickMe</button>
        `),
    methods:{
        my(){
            // 触发实例上的事件 Aqua
            this.$emit("Aqua",5,"142cm")
        },
    },
    mounted(){
        console.log(this);
        const _this = this; // this指向VueComponent的实例
        // 监听实例上的Aqua事件
        this.$on('Aqua',function(age,height){
            console.log('Aqua',age,height,this===_this)
            // 清除实例上的Aqua事件
            this.$off('Aqua');
        })
        // 监听实例上的Aqua事件 单次有效
        this.$once('Aqua',(age,height)=>{
            console.log('Aqua',age,height,this) // this指向VueComponent的实例
        })
    }
})

vm.$on

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

javascript

$on()方法是Vue.prototype上的属性
Vue.prototype 在 vc (VueComponent的实例) 的原型链上，所以可以直接使用 vc.$on

javascript

vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback(形参)

javascript

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

javascript

// 监听实例上的Aqua事件
this.$on('Aqua',function(age,height){
    console.log('Aqua',age,height,this===_this)
    // 清除实例上的Aqua事件
    this.$off('Aqua');
})

vm.$once

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

javascript

$once()方法是Vue.prototype上的属性
Vue.prototype 在 vc (VueComponent的实例) 的原型链上，所以可以直接使用 vc.$once()

javascript

vm.$once( event, callback(形参) )
参数：

{string} event
{Function} callback(形参)

javascript

// 监听实例上的Aqua事件 单次有效
this.$once('Aqua',(age,height)=>{
    console.log('Aqua',age,height,this) // this指向VueComponent的实例
})

vm.$off

移除自定义事件监听器。

javascript

$off()方法是Vue.prototype上的属性
Vue.prototype 在 vc (VueComponent的实例) 的原型链上，所以可以直接使用 vc.$off()

javascript

vm.$off( [event, callback] )
参数：

{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
 
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

javascript

// 监听实例上的Aqua事件
this.$on('Aqua',function(age,height){
    console.log('Aqua',age,height,this===_this)
    // 清除实例上的Aqua事件
    this.$off('Aqua');
})

状态提升/事件总线

在非父子关系的组件中进行互相传值，

通常在父组件中定义一个全局的数据状态(data)

javascript

通常在父组件中定义一个全局的数据状态(data)  => 状态提升
通常在Vue实例的原型连上增加一个属性 Vue.prototype.$bus  => 事件总线

data状态提升案例

javascript

// 父组件html 监听事件同时更新数据
<todo-main :task-list.sync="taskList"></todo-main>

// Vue实例
data: {
    // [{id:唯一标识，title:任务标题,isChecked:是否被选中}]
    taskList: [],// 任务列表
},
    
// 组件todo-main
// 接收父组件传来的taskList
props:["taskList"],
    methods:{
        // 组件templata中触发事件调用方法修改taskList
        fn1(id){
        	this.$emit("update:task-list",this.taskList.filter(v=>v.id !== id))
        }
}
// 组件2
    props:["taskList"],
    methods:{
         // 组件templata中触发事件调用方法修改taskList
        fn2(){
        	this.$emit("update:task-list",this.taskList.filter(v=>v.id !== id))
        }
    }

事件总线案例

javascript

// 在Vue的prototype上设置一个属性，类型是一个vm对象 === 
// this.$bus 这个对象 在vm和vc调用时指向的是同一个对象，同一个内存地址
Vue.prototype.$bus = new Vue()

父子之间传值-通过事件总线

javascript

<div id="app">
    <button @click="fn">FatherBtn</button>
	<hanser ></hanser>
</div>

javascript

<script type="module">
    // 在Vue的原型上设置一个全局属性 .$bus
    Vue.prototype.$bus = new Vue();
    Vue.component("hanser",{
        data(){
            return{
                num:1
            }
        },
        template:(`
            <button @click="Hanser">hanserBtn</button>
        `),  
        methods:{
            Hanser(){
                // VueComponent的实例;$bus属性在 VueComponent.__proto__.prototype原型上
                console.log('子组件中的this',this); 
                // 子组件设置触发事件 Aqua，并传值
                this.$bus.$emit("Aqua","mooooooooo~");
            },
        },      
    })
    new Vue({
        el:'#app',
        data:{
            age:12
        },
        methods:{
            fn(){
                // 父组件设置触发事件 Aqua，并传值
                this.$bus.$emit('Aqua',"neeeeeeeee~");
            },
        },
        mounted(){
            // Vue的实例;$bus属性在 Vue.prototype上
            console.log("父组件中的this",this); 
            this.$bus.$on('Aqua',function(str){
                console.log('Aqua',str)
            })
        }
    })
    
</script>

非父子关系传值

html

<body>
    <div id="app">
        <hanser></hanser>
        <yousa></yousa>
    </div>
</body>

javascript

<script type="module">
    // 在Vue的原型上设置一个全局属性 .$bus
    Vue.prototype.$bus = new Vue();
    Vue.component("hanser",{
        template:(`
            <button @click="Hanser">hanserBtn</button>
        `),  
        methods:{
            Hanser(){
                // VueComponent的实例;$bus属性在 VueComponent.__proto__.prototype原型上
                console.log('子组件中的this',this); 
                // 子组件设置触发事件 Aqua，并传值
                this.$bus.$emit("Aqua","mooooooooo~");
            },
        },      
    }),
    Vue.component("yousa",{
        template:(`
            <button @click="Yousa">yousaBtn</button>
        `),  
        methods:{
            Yousa(){
                console.log('子组件中的this',this); 
                // 子组件设置触发事件 Aqua，并传值
                this.$bus.$emit("Aqua","neeeeeeeee~");
            },
        },      
    })
    new Vue({
        el:'#app',
        data:{
            age:12
        },
        mounted(){
            this.$bus.$on('Aqua',function(str){
                console.log('Aqua',str)
            })
        }
    })
    
</script>

自定义事件 ​

事件名 ​

通过自定义事件传值 ​

使用事件抛出一个值 ​

组件上使用v-bind ​

组件上使用v-model ​

子向父传值 ​

修饰符 ​

.native修饰符 ​

.sync修饰符 ​

实例的事件方法 ​

Vue实例与组件实例 ​

vm.$emit ​

vm.$on ​

vm.$once ​

vm.$off ​

状态提升/事件总线 ​

自定义事件

事件名

通过自定义事件传值

使用事件抛出一个值

组件上使用v-bind

组件上使用v-model

子向父传值

修饰符

.native修饰符

.sync修饰符

实例的事件方法

Vue实例与组件实例

vm.$emit

vm.$on

vm.$once

vm.$off

状态提升/事件总线