Vue.js60分钟组件快速入门（下篇） - keepfool(3)_H5之家

组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。
在子组件上使用v-ref指令，可以给子组件指定一个索引ID：

<template> <child-component1 v-ref:cc1></child-component1> <child-component2 v-ref:cc2></child-component2> <button v-on:click="showChildComponentData">显示子组件的数据</button> </template>

在父组件中，则通过$refs.索引ID访问子组件的实例：

showChildComponentData: function() { alert(this.$refs.cc1.msg); alert(this.$refs.cc2.msg); } $parent示例

下面这段代码定义了两个组件：child-component和它的父组件parent-component。
在子组件中，通过this.$parent可以访问到父组件的实例。

<div> <parent-component></parent-component> </div> <template> <child-component></child-component> </template> <template> <h2>This is a child component</h2> <button v-on:click="showParentComponentData">显示父组件的数据</button> </template> <script src="js/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component', components: { 'child-component': { template: '#child-component', methods: { showParentComponentData: function() { alert(this.$parent.msg) } } } }, data: function() { return { msg: 'parent component message' } } }) new Vue({ el: '#app' }) </script>

View Demo

注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：
1.这让父组件与子组件紧密地耦合；
2. 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

自定义事件

有时候我们希望触发父组件的某个事件时，可以通知到子组件；触发子组件的某个事件时，可以通知到父组件。
Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。

每个 Vue 实例都是一个事件触发器：派发事件

下面这段代码是一个简单的事件派发处理

<div> <p>Messages: {{ messages | json }}</p> <child-component></child-component> </div> <template> <input v-model="msg" /> <button v-on:click="notify">Dispatch Event</button> </template> <script src="js/vue.js"></script> <script> // 注册子组件 Vue.component('child-component', { template: '#child-component', data: function() { return { msg: '' } }, methods: { notify: function() { if (this.msg.trim()) { this.$dispatch('child-msg', this.msg) this.msg = '' } } } }) // 初始化父组件 new Vue({ el: '#app', data: { messages: [] }, events: { 'child-msg': function(msg) { this.messages.push(msg) } } }) </script>

View Demo

我们将这个示例分为几个步骤解读：

子组件的button元素绑定了click事件，该事件指向notify方法

子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数

父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

运行结果如下：

广播事件

下面这段代码是一个简单的事件广播处理

<div> <input v-model="msg" /> <button v-on:click="notify">Broadcast Event</button> <child-component></child-component> </div> <template> <ul> <li v-for="item in messages"> 父组件录入了信息：{{ item }} </li> </ul> </template> <script src="js/vue.js"></script> <script> // 注册子组件 Vue.component('child-component', { template: '#child-component', data: function() { return { messages: [] } }, events: { 'parent-msg': function(msg) { this.messages.push(msg) } } }) // 初始化父组件 new Vue({ el: '#app', data: { msg: '' }, methods: { notify: function() { if (this.msg.trim()) { this.$broadcast('parent-msg', this.msg) } } } }) </script>

View Demo

我们将这个示例分为几个步骤解读：

父组件的button元素绑定了click事件，该事件指向notify方法

父组件的notify方法在处理时，调用了$broadcast，将事件派发到子组件的parent-msg事件，并给该该事件提供了一个msg参数

子组件的events选项中定义了parent-msg事件，子组件接收到父组件的广播后，调用parent-msg事件。