前端（二十二）—— 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 ...
随机推荐
- (5)C++ 循环和判断
循环 一.for循环 ; i < ; i++) { cout << "abc"<< endl; } 或 ; i; i--) { cout <&l ...
- 启动项目时，Mysql的连接问题
1.com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection ...
- leetcode.矩阵.378有序矩阵中第K小的元素-Java
1. 具体题目 给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩阵中第k小的元素.请注意,它是排序后的第k小元素,而不是第k个元素. 示例: matrix = [ [ 1, 5, ...
- InnoDB global status
常见参数 Innodb_buffer_pool_pages_free 发现 Innodb_buffer_pool_pages_free 为0 ,则说明buffer_pool 已经被用光,需要增大 in ...
- codeforces1213F Unstable String Sort 思维
题目传送门 题意:a和b都代表字符串的下标,至少用k个字符,构造一个长度为n的字符串,将这个字符串中的字符按无论是按$a$写还是按$b$写,字典序都非递减. 思路:如果将$a[l,r]=b[l,r]$ ...
- JavaScript代码／ES6语法笔记一
1. new Set()/去重一个数组 let arr = [1, 2, 2, 3, 3]; let set = new Set(arr); let newArr = Array.from(set); ...
- Nodejs去掉/favicon.ico的请求
const http=require("http"); const server=http.createServer(); server.on("request" ...
- OVR工厂简介
最近在写分布式架构的应用,顺便写了一个轻量级的集群批量创建影像金字塔的软件,在遥感影像生产中能提升不少效率.以下是软件简介: 由于32位ArcGIS在批量创建影像金字塔中计算力不足和易中断的缺点,在创 ...
- Java中IO流之字符流
我们有了字节流,为什么还需要字符流? 字符的底层是 字节 + 编码表 = 字符,字符是人能看懂的信息. 字符流在使用的时候,会以字节流为基础,把字节写入缓冲区,在缓冲区内根据编码类型(UTF-8,GB ...
- php操作redis--字符串篇
前提:已经安装好了redis和相关拓展 常用函数:set/get/decr/incr等 应用场景:普遍的key/value存储类型 连接: $redis = new Redis(); $redis-& ...