<!-- keyCode是13的时候出发。 --> <input v-on:keyup.13="submit" /> <input v-on:keyup.enter="submit" /> <!-- 支持的键名有： enter,tab,delete,esc,space,up,down,left,right -->
组件
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
注册
通过Vue.extend()来定义一个组件，Vue.component()来注册组件。
<div> <tree></tree> </div> // 定义 var Tree = Vue.extend({ template: '<div>This is a tree!</div>' }); // 注册 Vue.component('tree', Tree); // 开始渲染 new Vue({ el: '#box' }); // 定义，注册可以合并成一步。下面的代码和上面一样 Vue.component('tree', { template: '<div>This is a tree!</div>' }); new Vue({ el: '#box' });
渲染结果为：
<div> <div>This is a tree!</div> </div>
还可以进行局部注册
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { 'my-component': Child } })
props
props用于父组件向子组件传递数据。
Vue.component('child', { props: ['childMsg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ childMsg }}</span>' }); <child child-msg="hello"></child>
动态props， 当父组件的数据变化时，需要通知子组件跟着变化。
<input v-model="parentMsg" /> <child v-bind:child-msg="parentMsg"></child>
父子组件通信
当父组件数据变化时，可以通过props来通知子组件，子组件状态变化时，可以利用事件的冒泡来通知父组件。
子组件可以用this.$parent访问它的父组件。父组件有一个数组this.$children，包含它所有的子元素。
例子：
<!-- 子组件模板 --> <template> <input v-model="msg"> <button v-on:click="notify">Dispatch Event</button> </template> <!-- 父组件模板 --> <div> <p>Messages: {{ messages | json }}</p> <child></child> </div> // 注册子组件 // 将当前消息派发出去 Vue.component('child', { template: '#child-template', data: function () { return { msg: 'hello' } }, methods: { notify: function () { if (this.msg.trim()) { this.$dispatch('child-msg', this.msg) // 触发child-msg事件 this.msg = '' } } } }) // 启动父组件 // 将收到消息时将事件推入一个数组 var parent = new Vue({ el: '#events-example', data: { messages: [] }, // 在创建实例时 `events` 选项简单地调用 `$on` events: { 'child-msg': function (msg) { // 监听到 child-msg事件 // 事件回调内的 `this` 自动绑定到注册它的实例上 this.messages.push(msg) // messages改变自动修改html内容 } } })
上面这种写法child-msg事件触发后，的执行方法不直观。 所以可以采用v-on绑定事件。
<!-- 当child-msg触发时， 执行父组件的handleIt方法。 --> <child v-on:child-msg="handleIt"></child>
构建大型应用
在典型的 Vue.js 项目中，我们会把界面拆分为多个小组件，每个组件在同一地方封装它的 CSS 样式，模板和 JavaScript 定义，这么做比较好。如上所述，使用 Webpack 或 Browserify 以及合适的源码转换器，我们可以这样写组件：
当然也可以使用预处理器：
