前端（二十二）—— 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 ...
随机推荐
- 76、python学习第二篇
生成随机数的测试数据 ''' Created on 2017年4月8日 @author: weizhen #to create data for testing ''' import random f ...
- RFC6241 NETCONF
概述 NETCONF = The Network Configuration Protocol SDN = Software Define Network NETCONF协议分为传输层.消息层.操作层 ...
- 使用JQuery对页面进行绑值
使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- PHP面试 PHP基础知识 十一（开发环境及相关配置）
开发环境及相关配置 版本控制软件 集中式和分布式 集中式:集中式版本控制工具,版本库集中存放在中央服务器,团队成员里的每个人工作时从中央服务器下载代码,个人修改后再提交到中央服务器 分布式:分布式版本 ...
- 用scp实现多服务器文件分发
需要安装expect环境 yum install expect -y vi ip.txt #主机地址池 192.168.1.1 192.168.1.2 192.168.3.3 #如果是同一网段也可以不 ...
- Angularjs实现简单的登陆框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- java.lang
package cn.sxt; import java.lang.*; public class BooleanDemo { public static void main(Stri ...
- Django rest_framework 自动生成接口文档
自动生成接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 1. 安装依赖 REST fram ...
- Jmeter请求非Json格式的参数如何添加
Step1: 可以先在用户自定义变量中加入你需要添加的请求类型,具体参考图片 Step2: 在线程组下请求之前添加HTTP信息头管理器
- centos7上的h5ai折腾记
过程: 安装php-fpm和nginx,且经验证二者在其他项目可以正常使用. 从debian8拷贝过来_h5ai的nginx配置如下: location ~ [^/]\.php(/|$) { fast ...