Vue.js2.0教程：父组件调用子组件方法与事件传递

"这篇文章主要介绍了在Vue.js 2.0中如何实现父组件通过点击触发子组件的方法，并通过实例代码详细解析了相关过程。" 在Vue.js中，父子组件之间的通信是一个重要的概念。Vue.js提供了多种方式来实现这种通信，如props、事件（Event Bus）以及refs等。在本例中，我们将专注于使用事件机制来实现父组件调用子组件的方法。 首先，我们看到一个简单的HTML结构，包含一个`<div>`元素，其中有两个`<button-counter>`子组件，每个子组件都有一个`v-on:ee`监听器，这表示当子组件触发名为'ee'的事件时，将执行父组件的`incrementTotal`方法。 ```html <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="incrementTotal"></button-counter> </div> ``` 接着，我们定义了一个名为`button-counter`的子组件。子组件的模板包含一个按钮，按钮有一个`v-on:click`监听器，当按钮被点击时，它会执行`increment`方法。这个方法会增加子组件的`counter`值并触发一个名为'ee'的自定义事件，同时将'cc'作为参数传递给父组件。 ```javascript Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data() { return { counter: 0 } }, methods: { increment() { this.counter += 1 this.$emit('ee', 'cc') // 触发'ee'事件并将'cc'作为参数 } } }) ``` 然后，在父组件中，我们创建了一个Vue实例，设置了`total`数据属性，并定义了`incrementTotal`方法。这个方法会在接收到子组件触发的'ee'事件时被调用，接收到的参数（'cc'）会被加上'1'并赋值给`total`。 ```javascript new Vue({ el: '#counter-event-example', data: { total: 'arg' }, methods: { incrementTotal(b) { // 参数b将接收到子组件传递的值 this.total = b + '1'; // 更新父组件的total } } }) ``` 通过这种方式，每当用户点击子组件的按钮，子组件的`counter`会增加1，并触发'ee'事件，将'cc'传递给父组件。父组件接收到事件后，会更新其`total`的值，从而实现了父组件对子组件方法的调用。 此外，提到了`v-ref`特性，`v-ref`用于在DOM中获取组件的引用，这在需要直接操作或访问子组件实例时非常有用。例如，如果我们想在父组件中直接访问子组件的方法或属性，可以给子组件添加`v-ref`属性，如`<button-counter v-ref="myRef"></button-counter>`，然后在父组件中通过`this.$refs.myRef`来访问子组件实例。 总结，本文通过一个具体的例子详细阐述了Vue.js 2.0中如何利用事件机制实现父组件点击触发子组件的方法，同时也简要提及了`v-ref`的使用，这些都是在实际开发中非常重要的概念。通过理解这些知识点，开发者能够更有效地进行组件间的交互和状态管理。