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添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
JS轮播图的实现方法2
Aug 25 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伪造referer实例代码
2008/09/20 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python continue语句实例用法
2020/02/06 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python实现KNN近邻算法
2020/12/30 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
环保证明
2015/06/23 职场文书
房产遗嘱范本
2015/08/06 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
7个关于Python的经典基础案例
2021/11/07 Python