事件名

始终使用 kebab-case 的事件名。

通过事件向父组件发送信息

子组件中EnFontsize.vue中$emit

<button @click="$emit('enlarge-text')">Enlarge text</button>

父组件中

<template> <div id="app"> <div :style="{ fontSize: postFontSize + 'em' }"> <div v-for="post in posts" v-bind:key="post.id" v-bind:post="post"> <span>{{post.id}}</span> <span>{{post.title}}</span> <EnFontsize v-on:enlarge-text="postFontSize += 0.1"></EnFontsize> </div> </div> </div> </template> <script> import EnFontsize from "./components/EnFontsize"; export default { name: "App", data: function() { return { posts: [ { id: 1, title: "the title is..." }, { id: 2, title: "the title is..." } ], postFontSize: 1 }; }, components: { EnFontsize } }; </script>

使用事件抛出一个值

子组件中使用 $emit 的第二个参数来提供这个值：

<button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>

父组件中可以通过 $event 访问到被抛出的这个值：

<EnFontsize v-on:enlarge-text="postFontSize += $event"></EnFontsize>

或者，如果这个事件处理函数是一个方法：

<!-- <EnFontsize v-on:enlarge-text="postFontSize+=$event"></EnFon>--> <EnFontsize v-on:enlarge-text="onEnlargeText"></EnFontsize>

那么这个值将会作为第一个参数传入这个方法：

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

注意：这里是自动接收这个值并传给函数作为第一个参数，虽然没有使用$event接收

转载于:https://www.cnblogs.com/guangzan/p/11268980.html

相关资源：JAVA上百实例源码以及开源项目