前端（二十二）—— 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 ...
随机推荐
- JFreeChart教程
图表是信息的图形表示.有可用的各种工具,它可用于创建不同类型的图表. 本教程学习什么是JFreeChart?为什么需要它,并在各种方式列出一个基于Java的应用程序或独立创建不同类型的图表. JFre ...
- SpringBoot2.0拦截器 与 1.X版本拦截器 的实现
1.5 版本 先写个拦截器,跟xml配置方式一样,然后将拦截器加入spring容器管理 .接着创建 配置文件类 继承 WebMvcConfigurerAdapter 类,重写父类方法addInter ...
- SQL语句的执行顺序和效率
今天上午在开发的过程中,突然遇到一个问题,需要了解SQL语句的执行顺序才能继续,上网上查了一下相关的资料,现整理如下:一.sql语句的执行步骤: 1)语法分析,分析语句的语法是否符合规范,衡量语句中各 ...
- lg5169 xtq的异或和
题目 根据一些众所周知的结论,我们先跑一棵生成树出来,之后把所有简单环都搞出来,那么\(u\)到\(v\)的路径一定可以由树上的路径和一些简单环拼起来得到 把所有简单环都插到一个线性基里,之后dfs一 ...
- csdn加入暂时会话功能
版权声明:本文为博主原创文章.若要转载请注明出处! ^_^ https://blog.csdn.net/u010892841/article/details/25334153 ...
- adb.exe端口被占用，起不来报错
一.准备部署android功能调试时:报错 Please ensure that adb is correctly located at 'D:\ProgramFiles\eclipse_jee_ox ...
- 为 STM32 移植 Berry 脚本语言
Berry 是我为单片机设计的一款脚本语言,该语言具有资源占用小.平台无关.执行速度快和易于掌握等优点.在单片机上使用脚本语言可以提高单片机的二次开发能力以及调试效率,同时也是一种比较新颖的玩法.本教 ...
- 记录ajax前后交互
前台请求 $.ajax({ url : '/turn', type : "post", data : { "userName":userName, " ...
- 华南理工大学“三七互娱杯”程序设计竞赛 G: HRY and tree
题意:给出一棵树,定义两点间代价为两点路径上最长的边权,问任两点间的代价和. 解法:这道题的解法十分巧妙:直接用Kruskal对这棵树求最小生成树,然后对于即将加入到MST的这条边(u,v,w),这条 ...
- rabbitmq AmqpClient 使用Topic 交换机同一个channel 同时多个队列 ，多个交换机，C++代码示例
// 消息发送 bool PublishExchangeTopicMulti(const std::string &strUri) { AmqpClient::Channel::ptr_t c ...