全局注册组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <global-component></global-component> </div> <script type="text/javascript"> Vue.component(‘global-component‘, { template: ‘<div>一个自定义全局组件！</div>‘ }) var vm1 = new Vue({ el: ‘#app-1‘ }) </script> </body> </html>
global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）
全局注册组件的语法格式为Vue.component(tagName, options)
全局注册的组件要在Vue实例化之前注册完成
局部注册组件
<div id="app-1"> <local-component></local-component> </div> <script type="text/javascript"> var localComponent = { template: ‘<div>一个自定义局部组件！</div>‘ } var vm1 = new Vue({ el: ‘#app-1‘, // 局部注册的组件只能在父级模板中使用 components: { ‘local-component‘: localComponent } }) </script>
Vue对象实例化时，第5个参数类型components(组件)
局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用
使用Props属性传参
<div id="app-2"> <input v-model="content" placeholder="这里输入组件参数"> <global-component v-bind:param="content"></global-component> </div> <script type="text/javascript"> Vue.component(‘global-component‘, { props: [‘param‘], template: ‘<div>组件的参数：{{ param }}</div>‘ }) var vm2 = new Vue({ el: ‘#app-2‘, data: { content: ‘‘ } }) </script>
组件可以通过props属性来实现传参
列表渲染在组件中使用
一个很好玩的例子，把完整的代码贴出来
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-3"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="输入一个等办事项" > <ul> <li is="global-component" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div> <script type="text/javascript"> // 使用$on(eventName)监听一个事件 // 使用$emit(eventName)触发一个事件 Vue.component(‘global-component‘, { template: ‘ <li> {{ title }} <button v-on:click="$emit(\‘remove\‘)">X</button> </li> ‘, props: [‘title‘] }) var vm3 = new Vue({ el: ‘#app-3‘, data: { newTodoText: ‘‘, todos: [ { id: 1, title: ‘洗碗‘ }, { id: 2, title: ‘倒垃圾‘ }, { id: 3, title: ‘除草‘ }, ], nextTodoId: 4 }, methods: { addNewTodo: function() { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = ‘‘ } } }) </script> </body> </html>
