Vue.js学习笔记 第八篇 组件
2024-08-22 21:55:46
全局注册组件
<!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>
最新文章
- 在Ubuntu下配置运行Hadoop2.4.0单节点配置
- oracle查询包含某个字段的表
- JavaScript的学习5
- 随机数组&大数相加
- wdlinux 一键安装
- HDU 2594 Simpsons’ Hidden Talents（KMP的Next数组应用）
- NET程序的破解--静态分析(Xenocode Fox 2006 Evaluation)
- Java 读写XML文件 API--org.dom4j
- C++11中新特性之：lambda 表达式
- JS属性操作
- SQL Server 2017 安装过程中的一点说明（有点意思）
- [51nod1673]树有几多愁
- 浅谈Linux基本命令
- c/c++ 多线程 等待一次性事件 异常处理
- Ubuntu16.04下安装Hyperledger Fabric 1.0.0
- Nginx使用rewrite重新定向
- java 解析txt/html文件
- 教您使用java爬虫gecco抓取JD全部商品信息
- 国内linux 镜像
- Linux系统编程：socket网络编程（操作篇）