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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
理解jquery事件冒泡
Jan 03 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
留学经费担保书
2014/05/12 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014年国庆节寄语
2014/09/19 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书