Vue组件

一、组件介绍

  • 每一个组件都是一个vue实例
  • 每个组件均具有自身的模板template，根组件的模板就是挂载点，根组件也可以显式书写模板，会替换掉挂载点
  • 每个组件模板只能拥有一个根标签
  • 子组件的数据具有作用域，以达到组件的复用

二、根组件

1、什么是根组件

通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)

2、模板template

  • 由""包裹的html代码块，出现在组件的内部，赋值给组件的 $template 变量
  • 根组件如果不书写自身模板，那么模板就采用挂载点,如果显式书写模块，就会替换挂载点,但根组件必须拥有挂载点
  1. <body>
  2. 	<p>app之上</p>
  3. 	<div id="app">
  4. 		<h1>{{ msg }}</h1>
  5. 	</div>
  6. 	<p>app之下</p>
  7. </body>
  8. <script src="js/vue-2.5.17.js"></script>
  9. <script type="text/javascript">
  10. 	// 每个组件组件均拥有模板,template
  11. 	var app = new Vue({
  12. 		// 根组件的模板就是挂载点
  13. 		el: "#app",
  14. 		data : {
  15. 			msg: "根组件"
  16. 		},
  17. 		template: "<div>显式模板</div>"
  18. 	})
  19. 	// app.$template   取值
  20. </script>

三、局部组件

  • 一个满足vue语法规则的对象就是一个组件
  • 直接定义组件，用一个变量名来接收，就是创建一个局部组件
  • 变量名就是局部组件的组件名， var 组件名 = {}
  • 通过组件名可以使用该组件

**使用局部组件时，要先在根组件中注册 components:{} **

  1. <div id="app">
  2.     <local-tag></local-tag>
  3.     <local-tag></local-tag>
  4. </div>
  6. <!-- 语法规则 -->
  7. <!-- 有自身的模板template，有data/methods/computed/watch -->
  8. <script>
  9.     var localTag = {
  10.         // data需要绑定方法，数据通过返回值进行处理，达到组件复用，数据的私有化
  11.         data () {
  12.             return {
  13.                 count: 0
  14.             }
  15.         },
  16.         template: '<button @click="btnAction">局部{{ count }}</button>',
  17.         methods: {
  18.             btnAction () {
  19.                 this.count ++
  20.             }
  21.         }
  22.     }
  23.     new Vue({
  24.         el: "#app",
  25.         // 注册子组件，局部组件要在父组件中使用，必须要提前在父组件中注册
  26.         components: {
  27.             'local-tag': localTag   // 当key与value写法一样时，可以直接写 localTag
  28.         }
  29.     })
  30. </script>

四、全局组件

  • 用 Vue.component("组件名", {}) 来创建全局组件
  • 全局组件附属于Vue实例，可以不需要注册就可以使用

使用全局组件，不用在父级组件中注册

  1. <div id="app">
  2.     <global-tag></global-tag>
  3.     <global-tag></global-tag>
  4. </div>
  5. <script>
  6. 	Vue.component('global-tag', {
  7. 		data () {
  8. 			return {
  9. 				count: 0
  10. 			}
  11. 		},
  12. 		template: '<button @click="btnAction">全局{{ count }}</button>',
  13. 		methods: {
  14. 			btnAction () {
  15. 				this.count ++
  16. 			}
  17. 		}
  18. 	})
  19.     new Vue({
  20.         el: "#app"
  21.     })
  22. </script>

五、父组件传递数据给子组件

  • 通过 **绑定属性 **的方式进行数据传递

    1. 给在父组件中出现的子组件名定义标签的全局属性
    2. 在全局属性的值赋给父组件的数据变量
    3. 在子组件内部，通过props拿到标签中的全局属性名
    4. 在模板中直接用属性名来访问数据，在方法中通过 this.属性名 来访问数据
  1. <div id="app">
  2.     <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
  3. </div>
  4. <script type="text/javascript">
  5. 	Vue.component('global-tag', {
  6.         // 子组件中通过props拿到标签中的全局属性名
  7. 		props:['sup_data1', 'supdata2'],
  8.         // 通过属性名取得父组件中的数据
  9. 		template: '<div @click="divClick">{{ sup_data1 }} {{ supdata2 }}</div>',
  10.         methods:{
  11.             divClick(){
  12.                 console.log(this.sup_data1)
  13.             }
  14.         }
  15. 	})
  16. 	new Vue({
  17. 		el: '#app',
  18. 		data: {
  19. 			sup_data1: '数据1',
  20. 			sup_data2: '数据2'
  21. 		}
  22. 	})
  23. // 1.数据由父级提供
  24. // 2.在父级模板(挂载点)中出现的子组件名(local-tag)上，为其设置全局属性,属性值就是父级提供的数据变量
  25. // 3.在子组件中，提供$props来拿到自身的全局属性名(用''括起来的数组)
  26. // 4.在模板中直接用属性名来访问数据，在方法中通过this.属性名来访问数据
  27. // 5.名字出现多个单词的时候，使用_连接语法进行处理，以达到命名的统一
  28. </script>

六、子组件传递数据给父组件

  • 通过 发送事件请求 的方式进行数据传递
  • 数据由子组件提供，父组件通过事件的回调方法获取数据
  • 发送数据的关键: $emit("事件名", ...args)
  1. <div id="app">
  2.     <global-tag @send_action='receiveAction'></global-tag>
  3. </div>
  4. <script type="text/javascript">
  5. 	Vue.component('global-tag', {
  6. 		data () {
  7. 			return {
  8. 				sub_data1: "数据1",
  9. 				sub_data2: '数据2'
  10. 			}
  11. 		},
  12. 		template: '<div @click="clickAction">发生</div>',
  13. 		methods: {
  14. 			clickAction () {
  15. 				this.$emit('send_action', this.sub_data1, this.sub_data2)
  16. 			}
  17. 		}
  18. 	})
  19. 	new Vue({
  20. 		el: '#app',
  21. 		methods: {
  22. 			receiveAction (v1, v2) {
  23. 				console.log(v1, v2)
  24. 			}
  25. 		}
  26. 	})
  27. // 1.数据由子级提供
  28. // 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
  29. // 3.在父级的模板中，子组件名上，为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
  30. // 4.在实现体中就可以拿到回调参数
  31. </script>

七、父子组件实现todoList

  1. <div id="app">
  2.     <div>
  3.         <input type="text" v-model='value'>
  4.         <button @click='click'>提交</button>
  5.     </div>
  6.     <ul>
  7.         <item
  8.               v-for='(e, i) in list'
  9.               :key='i'
  10.               :ele='e'
  11.               :index='i'
  12.               @delete='deleteAction'
  13.               ></item>
  14.     </ul>
  15. </div>
  16. <script type="text/javascript">
  17. 	Vue.component('item', {
  18. 		props: ['ele', 'index'],
  19. 		template: '<li @click="item_click">{{ ele }}</li>',
  20. 		methods: {
  21. 			item_click: function () {
  22. 				this.$emit('delete', this.index)
  23. 			}
  24. 		}
  25. 	})
  26. 	new Vue({
  27. 		el: '#app',
  28. 		data: {
  29. 			value: '',
  30. 			list: [],
  31. 		},
  32. 		methods: {
  33. 			click: function () {
  34. 				this.list.push(this.value)
  35. 				this.value = ''
  36. 			},
  37. 			deleteAction: function (index) {
  38. 				this.list.splice(index, 1)
  39. 			}
  40. 		}
  41. 	})
  42. </script>

前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList的更多相关文章

  1. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  2. 微信小程序把玩（二十二）action-sheet组件

    原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...

  3. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  4. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  5. WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]

    原文:WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇] 在[上篇]中,我们分别站在消息交换和编程的角度介绍了SOAP Fault和FaultException异常.在服务执行过 ...

  6. (C/C++学习笔记) 二十二. 标准模板库

    二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...

  7. JAVA基础知识总结：一到二十二全部总结

    >一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...

  8. Alink漫谈(二十二) ：源码分析之聚类评估

    Alink漫谈(二十二) :源码分析之聚类评估 目录 Alink漫谈(二十二) :源码分析之聚类评估 0x00 摘要 0x01 背景概念 1.1 什么是聚类 1.2 聚类分析的方法 1.3 聚类评估 ...

  9. [分享] IT天空的二十二条军规

    Una 发表于 2014-9-19 20:25:06 https://www.itsk.com/thread-335975-1-1.html IT天空的二十二条军规 第一条.你不是什么都会,也不是什么 ...

  10. 二十二、OGNL的一些其他操作

    二十二.OGNL的一些其他操作 投影 ?判断满足条件 动作类代码: ^ $   public class Demo2Action extends ActionSupport {     public ...

随机推荐

  1. PHP面试 MySQL的高可扩展和高可用

    MySQL的高可扩展和高可用 面试题一 MySQL分表和分区的工作原理,分表和分区的使用场景和优缺点. 分区表的原理 对用户而言,分区表时一个独立的逻辑表,但是底层MySQL将其分成了多个物理子表,这 ...

  2. OAccflow集成sql

    SELECT * FROM PORT_EMP WHERE NO='18336309966'SELECT * FROM PORT_DEPT WHERE no='42DBAF50712C4046B09BC ...

  3. Rust <0>：源代码组织，Cargo 入门

    Rust 源代码组织,使用配套的 Cargo 工具,其功能强大,程序员可摆脱 C/C++ 中需要自行维护 make.cmake 之类配置的工作量. 初始化一个项目: cargo new --bin h ...

  4. 【足迹C++primer】47、Moving Objects(2)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/cutter_point/article/details/37954805 Moving Object ...

  5. 2018APIO 进京赶考

    先见识了一下CTSC的操作...涨了见识... 打铁匠x1 见识了个全英文的ppt,各种讲课其实真的讲的很好,只是逻辑性太强反而让完全不会的同学有些尴尬... linux真的令人窒息...GUIDE用 ...

  6. 【外】001-python3之zip函数

    zip函数语法格式zip(可迭代对象1, 可迭代对象2, ... ,可迭代对象n) 函数接收任意个可迭代对象作为参数, 将所有对象中对应位置上的元素分别打包在一起组成一个tuple, 并将所有的tup ...

  7. clip-path 加边框border

    最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层 ...

  8. C# Copy一个文件到另一个文件夹下

    public static void CopyToFile() { //源文件路径 string sourceName = @"D:\Source\Test.txt"; //目标路 ...

  9. Android蓝牙自动配对Demo，亲测好使！！！（转）

    蓝牙自动配对,即搜索到其它蓝牙设备之后直接进行配对,不需要弹出配对确认框或者密钥输入框. 转载请注明出处http://blog.csdn.net/qq_25827845/article/details ...

  10. 【leetcode】538. Convert BST to Greater Tree

    题目如下: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the orig ...