单个组件相对而言简单一点。在我看来，有些事情你需要知道才能让你开始。关于Vue组件的模板和脚本部分如何协同工作的。模板和脚本组成一个单元，并共享相同的数据。最好的学习就是通过一些实例来阐述，这样更易于交流。

模板到脚本：事件

在UI中用户事件之后用户可以使用一些用户事件。在模板中@click="handleClick"将会调用handleClick方法。

<template>
    <button @click="handleClick">
        Tacos?
    </button>
</template>

<script>
    export default {
        name: 'SingleComponent',
        methods: {
            handleClick () {
                alert('Tacos!')
            }
        }
    }
</script>

效果如下：

点击示例中的button会有一个alert弹出来。如下所示：

上面示例中，采用的是x-template定义组件模板的方式。如果你对创建组件模板方式了解不多，建议阅读《Vue.js 定义组件模板的七种方式》一文。至于在示例中采用哪一种方式，根据自己的喜好或项目需求来做。

再次回到我们示例中来，在上面的示例中，我们稍做调整，你就可以传参数到handleClick()方法中：

<template>
    <button @click="handleClick('Tacos')"> Tacos? </button>
</template>

<script>
    export default {
        name: 'SingleComponent',
        methods: {
            handleClick (value) {
                alert(`${value}!`)
            }
        }
    }
</script>

上面这个示例，在handleClick()方法中传了一个value参数。在@click调用handleClick()方法时传了一个Hel