前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件
一、组件介绍
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点，根组件也可以显式书写模板，会替换掉挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用
二、根组件
1、什么是根组件
通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
2、模板template
- 由""包裹的html代码块，出现在组件的内部，赋值给组件的 $template 变量
- 根组件如果不书写自身模板，那么模板就采用挂载点,如果显式书写模块，就会替换挂载点,但根组件必须拥有挂载点
<body>
<p>app之上</p>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点
el: "#app",
data : {
msg: "根组件"
},
template: "<div>显式模板</div>"
})
// app.$template 取值
</script>
三、局部组件
- 一个满足vue语法规则的对象就是一个组件
- 直接定义组件，用一个变量名来接收，就是创建一个局部组件
- 变量名就是局部组件的组件名， var 组件名 = {}
- 通过组件名可以使用该组件
**使用局部组件时，要先在根组件中注册 components:{} **
<div id="app">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<!-- 语法规则 -->
<!-- 有自身的模板template，有data/methods/computed/watch -->
<script>
var localTag = {
// data需要绑定方法，数据通过返回值进行处理，达到组件复用，数据的私有化
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">局部{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
}
new Vue({
el: "#app",
// 注册子组件，局部组件要在父组件中使用，必须要提前在父组件中注册
components: {
'local-tag': localTag // 当key与value写法一样时，可以直接写 localTag
}
})
</script>
四、全局组件
- 用 Vue.component("组件名", {}) 来创建全局组件
- 全局组件附属于Vue实例，可以不需要注册就可以使用
使用全局组件，不用在父级组件中注册
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">全局{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
})
new Vue({
el: "#app"
})
</script>
五、父组件传递数据给子组件
通过 **绑定属性 **的方式进行数据传递
- 给在父组件中出现的子组件名定义标签的全局属性
- 在全局属性的值赋给父组件的数据变量
- 在子组件内部，通过props拿到标签中的全局属性名
- 在模板中直接用属性名来访问数据，在方法中通过 this.属性名 来访问数据
<div id="app">
<global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
// 子组件中通过props拿到标签中的全局属性名
props:['sup_data1', 'supdata2'],
// 通过属性名取得父组件中的数据
template: '<div @click="divClick">{{ sup_data1 }} {{ supdata2 }}</div>',
methods:{
divClick(){
console.log(this.sup_data1)
}
}
})
new Vue({
el: '#app',
data: {
sup_data1: '数据1',
sup_data2: '数据2'
}
})
// 1.数据由父级提供
// 2.在父级模板(挂载点)中出现的子组件名(local-tag)上，为其设置全局属性,属性值就是父级提供的数据变量
// 3.在子组件中，提供$props来拿到自身的全局属性名(用''括起来的数组)
// 4.在模板中直接用属性名来访问数据，在方法中通过this.属性名来访问数据
// 5.名字出现多个单词的时候，使用_连接语法进行处理，以达到命名的统一
</script>
六、子组件传递数据给父组件
- 通过 发送事件请求 的方式进行数据传递
- 数据由子组件提供，父组件通过事件的回调方法获取数据
- 发送数据的关键: $emit("事件名", ...args)
<div id="app">
<global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
data () {
return {
sub_data1: "数据1",
sub_data2: '数据2'
}
},
template: '<div @click="clickAction">发生</div>',
methods: {
clickAction () {
this.$emit('send_action', this.sub_data1, this.sub_data2)
}
}
})
new Vue({
el: '#app',
methods: {
receiveAction (v1, v2) {
console.log(v1, v2)
}
}
})
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中，子组件名上，为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数
</script>
七、父子组件实现todoList
<div id="app">
<div>
<input type="text" v-model='value'>
<button @click='click'>提交</button>
</div>
<ul>
<item
v-for='(e, i) in list'
:key='i'
:ele='e'
:index='i'
@delete='deleteAction'
></item>
</ul>
</div>
<script type="text/javascript">
Vue.component('item', {
props: ['ele', 'index'],
template: '<li @click="item_click">{{ ele }}</li>',
methods: {
item_click: function () {
this.$emit('delete', this.index)
}
}
})
new Vue({
el: '#app',
data: {
value: '',
list: [],
},
methods: {
click: function () {
this.list.push(this.value)
this.value = ''
},
deleteAction: function (index) {
this.list.splice(index, 1)
}
}
})
</script>
前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList的更多相关文章
- Bootstrap入门（二十二）组件16：列表组
Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...
- 微信小程序把玩（二十二）action-sheet组件
原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
- WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]
原文:WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇] 在[上篇]中,我们分别站在消息交换和编程的角度介绍了SOAP Fault和FaultException异常.在服务执行过 ...
- (C/C++学习笔记) 二十二. 标准模板库
二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...
- JAVA基础知识总结：一到二十二全部总结
>一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...
- Alink漫谈(二十二) ：源码分析之聚类评估
Alink漫谈(二十二) :源码分析之聚类评估 目录 Alink漫谈(二十二) :源码分析之聚类评估 0x00 摘要 0x01 背景概念 1.1 什么是聚类 1.2 聚类分析的方法 1.3 聚类评估 ...
- [分享] IT天空的二十二条军规
Una 发表于 2014-9-19 20:25:06 https://www.itsk.com/thread-335975-1-1.html IT天空的二十二条军规 第一条.你不是什么都会,也不是什么 ...
- 二十二、OGNL的一些其他操作
二十二.OGNL的一些其他操作 投影 ?判断满足条件 动作类代码: ^ $ public class Demo2Action extends ActionSupport { public ...
随机推荐
- spss-数据清洗-处理重复数据
spss-数据清洗-处理重复数据 数据导入之后就需要对数据进行清洗.数据清洗主要是对多余重复的数据筛选清除,将缺失的数据补充完整,将错误的数据纠正或者删除.接下来操作如何将重复数据处理操作. 步骤一: ...
- JavaScript类型和语法
JavaScript类型和语法 一.类型 1.内置类型(null.undefined.boolean.number.string.object.symbol(es6中新增))(除对象之外,其它统称为基 ...
- QT的三种开发方式
最近在学习QT GUI,单纯使用C++硬编码的方式,直接是采用QWidget部件来做,而不是采用QT Designer做UI界面,也不是采用QML+Javascript.单纯使用C++硬编码的方式,缺 ...
- 菩提圣心诀---zabbix自定义key监控oracle连接状态(python脚本)
目的:此次实验目的是为了zabbix服务端能够实时监控某服务器上oracle实例能否正常连接 环境:1.zabbix_server 2.zabbix_agent(含有oracle) 主要知识点: 1. ...
- 37-python基础-python3-字典的常用方法-keys()-values()-items()
有 3 个字典方法,它们将返回类似列表的值,分别对应于字典的键.值和键-值对:keys().values()和 items(). 这些方法返回的值不是真正的列表,它们不能被修改,没有append()方 ...
- 11-vim-撤销和删除命令-01-撤销
撤销和恢复撤销 命令 英文 功能 u undo 撤销上一次命令 ctrl u redo 恢复撤销的命令
- java性能调优03
1.java中的四种引用类型(级别由高到低为:强引用,软引用,弱引用和虚引用) 1.1 强引用:默认创建的变量都是强引用,垃圾回收机制不会将其回收,当内存空 间不足,Java虚拟机宁愿抛出OutOfM ...
- selinux与kernel 0day
selinux与kernel 0day kernel NULL pointer的利用需要把shellcode映射到内存0处, 大家在测试exp的时候,总能发现一个规律, 开着selinux就能溢出成功 ...
- CF1228F
写了一个特别麻烦的做法 首先一共有三种情况:1.删掉一个叶子,2.删掉根的一个儿子,3.其他的节点 第一种情况会有两个度数为2的节点,第二种情况没有度数为2的节点,第三种情况会有一个度数为4的节点 然 ...
- CSUST 集训队选拔赛题解
选拔赛的题解,~~~ 题目链接:请点击 A题 素数筛 + 线段树(树状数组) 先用素数筛打表,然后线段树更新,遍历求出值,O(1)查询即可 AC代码: /*num数组 是把记录 数是否存在 存在即为1 ...