全局注册组件

<!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>

Vue.js学习笔记 第八篇 组件的更多相关文章

  1. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  2. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  3. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  4. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  6. Vue.js学习笔记 第三篇 条件渲染

    条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. Vmware私有云虚拟机(CentOS 6.5 OS)之根分区扩容

    注:适用于未使用lvm管理的分区,目前仅在CentOS 6.5 上操作,其他系统尚未测试,请谨慎操作 一.查看当前分区状况 [root@disk-test ~]# df -h Filesystem   ...

  2. C++11写算法之顺序查找

    从这篇博文起,将尝试使用C++11来写常用算法与数据结构. 本篇博文以最简单的顺序查找作为系列博文的起点,并作约定如下: 1,变量名 : varList : 函数名 : SequentialFind ...

  3. 循环遍历完成后再进行else判断

    有时需要在循环遍历完后再进行else操作,通常的办法是在循环前设置一个flag,用于判断.具体例子如下:

  4. 哈工大LTP

    http://ltp.ai/ http://pyltp.readthedocs.io/zh_CN/latest/ http://www.cnblogs.com/Denise-hzf/p/6612886 ...

  5. css单行排版

    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  6. 次小生成树模板(poj1679)

    prim #include <iostream> #include <cstdio> #include <cstdlib> #include <cmath&g ...

  7. 2588: Spoj 10628. Count on a tree

    2588: Spoj 10628. Count on a tree Time Limit: 12 Sec  Memory Limit: 128 MBSubmit: 5766  Solved: 1374 ...

  8. inner join和out join的区别

    inner join(又叫join) out join包括left join,right join和full join(也就是left+right)

  9. 迷宫问题(java实现)

    1. public class Direction { private int x; private int y; public Direction(int x, int y) { this.x = ...

  10. JS和C# 里的闭包及闭包在事件中的使用

    在Javascript世界里,无所不用闭包及自定义事件, 自定义事件其实也是事先定义好一种规则 ,当触发者被响应后执行的一段回调.下面看个例子 function dothing(callBack){ ...