vue组件入门知识全梳理


Posted in Javascript onSeptember 21, 2020

组件

vue组件入门知识全梳理

概念:template是入口组件,那么挂载在template下的组件是入口组件的子组件

局部组件

三步口诀:声子,挂子,用子

  • 声明一个局部组件,变量名首字母大写(为了和H5标签做区分),里面的内容和vue实例化对象的内容相似,但是不需要el,data必须是一个函数,函数返回一个对象
  • 把组件挂载到入口文件的components对象中。
  • 在入口文件的template中使用,可以是双闭合标签也可以是单闭合标签

全局组件

Vue.component(name,options)

第一个参数是组件的名称

第二个参数是组件的对象

注意全局组件要在创建Vue实例化对象前,否则会报错

vue组件入门知识全梳理

// 全局组件(要在创建Vue实例之前)
 Vue.component('Vbtn', {
 template: `<button>全局按钮组件</button>`
 })
 // 1、创建一个入口组件
 // 2、创建头部组件,侧边栏组件和内容组件
 var Heard = {
 template: `
 <div>
 <h2>我是头部组件</h2>
 <Vbtn></Vbtn>
 </div>
 `
 }
 var Aside = {
 template: `
 <div>我是侧边栏组件</div>
 `
 }
 var Content = {
 template: `
 <div>我是内容组件</div>
 `
 }
 var App = {
 template: `
 <div class="main">
 <Heard class = "heaed"></Heard>
 <div class="main2">
 <Aside class="aside"></Aside>
 <Content  class="content"/>
 </div>
 </div>
 `,
 components: {
 Heard,
 Aside,
 Content
 }
 }
 new Vue({
 el: "#app",
 data() {
 return {
 msg: "这是测试"
 }
 },
 template: `
 <App></App>
 `,
 components: {
 App
 }
 });

组件深入

问:为什么要通过父亲获取数据,在传递到子组件呢?

答:通过父亲向后端获取数据,然后在分发到各组件可以减少后端的交互,不然各个组件都向后端发送请求影响性能

见下图:

vue组件入门知识全梳理

父子组件传值(父传子)

1、父 用子 时通过 绑定自定义属性 传递,

2、子要 声明 props:['属性']接收父绑定的自定义属性

3、收到就是自己的随便用

在template中直接使用 在js中this.属性名

vue组件入门知识全梳理

小补充:绑定自定义属性时:常量传递直接用,变量传递加冒号

总结父传子

父用子:先声子、挂子、用子

父传子:父传子(属性)、子声明(接收)、子使用

子传父

1、父 用子 绑定 自定义事件

2、子触发自定义事件:this.$emit()

第一个参数是**自定义事件名**
第二个参数是**传递进去的值**
![image](/img/bVbO3Ps)

全局组件的数据传递 1、通过VUE内置组件slot分发内容

原因:如果不使用slot无法修改全局组件的内容

作用:slot元素作为承载分发内容的出口

2、父子传值

自定义属性传递常量直接使用不需要加冒号

vue组件入门知识全梳理

如果要触发原生的事件需要通过 @原生事件名.native调用

vue组件入门知识全梳理

3、具名插槽

在子组件中声明使用vue的内置组件:

<slot name = "one"></slot>

父组件中调用

<h2 slot= "one"></h2>

这样做的目的:可以一条数据一个坑,数据不会乱了

附加功能

1、过滤器filters

1、作用:对当前数据添油加醋

2、语法:声明在组件内使用filters对象,返回一个函数,函数一定要有返回值

3、调用:template中调用过滤器:数据属性|过滤器名字

var Content = {
  template: `
   <div>
   <input type = number  v-model = "msg"/>
   <h2>{{msg|RmbData}}</h2>
   </div>
  `,
  data(){
   return{
   msg:10
   }
  },
  filters:{
   RmbData(value){
   return '$'+value
   }
  }
 }

生命周期

总结

到此这篇关于vue组件入门知识全梳理的文章就介绍到这了,更多相关vue组件知识内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
JQuery小知识
Oct 15 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
vue操作dom元素的3种方法示例
Sep 20 #Javascript
npm ci命令的基本使用方法
Sep 20 #Javascript
js面试题之异步问题的深入理解
Sep 20 #Javascript
js实现简单的点名器随机色实例代码
Sep 20 #Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
python实现堆和索引堆的代码示例
2018/03/19 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
刑事撤诉申请书
2015/05/18 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫