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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
浅谈JavaScript字符集
May 22 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
Vue引入Stylus知识点总结
Jan 16 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/11/16 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php 文件上传实例代码
2012/04/19 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
php生出随机字符串
2017/07/06 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
简历中自我评价分享
2013/10/09 职场文书
高中信息技术教学反思
2016/02/16 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL