vue的组件创建和使用
首先说一下vue组件
什么是组件?
在我的理解,vue的所有页面内容都是组件。
什么是父子组件?
因为所有的页面内容都是组件,那么怎么区分父子组件呢?其实很简单,现在有一个页面,在js里面的 components 创建的组件都是子组件,当然包括外部引入的组件都是叫做子组件。
在当前页面写的组件叫做父组件。
什么是插槽?
插槽是用来分发任务(或者说是分发内容的),可以理解为它是用来在子组件里面占位的,然后通过父组件来给插槽设置内容来进行显示。显示的位置就是子组件插槽的位置。(如果还不理解没有关系,接下来会有实例来说明)
当简单的了解这几个内容之后就可以开始实际操作了。
组件分两种:
一种是内部组件,还有一种是外部组件。
内部组件是只能用于当前页面,具有局限性,不能进行全局复用。
外部组件更加灵活,并且具有全局性,可以全局复用。
下面我们先来看一下内部组件的创建和使用:
效果:
接下来是外部组件的创建和使用:先来个简单的:先创建一个公共文件夹,用来放组件,然后创建一个组件(即一个vue文件 )
创建好组件之后在需要使用的页面去引入组件并且注册组件:
使用组件:
效果图:
接下来写一个效果组件:
引入和注册组件: 组件标签的名字还可以像这样写,直接拿导入的组件名作为标签,效果是一样的
接下来是使用:
· 效果图:
鼠标悬浮到这个组件上去效果:和预期是一样的,说明组件的样式等是可以生效的。
接下来是带插槽的组件,在上面说过插槽其实就是相当于用来在子组件中占空间给父组件来设置内容的
那看一下它到底是怎么样的。
步骤和上面的外部组件是差不多的。
先创建子组件:
引入和组成子组件
使用带插槽的子组件:
效果图:
哎,好像没有区别啊,当然啦,因为我还没有给插槽设置内容嘛,那应该怎么设置呢?其实很简单,在这个子组件的标签里面设置的内容就是插槽会显示的内容
这样在看效果有什么不同:
效果不明显?没事,再来几个效果进行对比
在子组件里面的插槽添加一个内容,这样再看效果
子组件的div里面的内容是在slot后面显示的,那就证实了slot 就是用来占位的了。当然它的作用可不仅仅是用来占位置,它的主要作用是用来分发任务(或者说是分发内容)
再看例:
效果图:
上面的是匿名插槽,如果我想指定内容到一个指定的插槽位置里面那应该怎么办呢?
为了解决这个问题,就有了具名插槽,具名插槽就是有名字的插槽的意思,有名字的话要指定内容就容易了。
看实例:创建一个具名插槽 在name属性的值就是插槽的名字
使用:注意,具名插槽使用的时候一定要把插槽名字写在最外面的标签,要保证插槽和子组件的 ying 标签保持父子关系,否则会被当成是匿名插槽来显示
效果:
上面两个插槽都不能进行数据传递,那么就有了区域插槽来解决这个问题
区域插槽(作用域插槽):因为区域插槽可以用来处理父组件传递的数据,那么我们首先要做的是创建父级组件的数据
在父组件的data里面创建一个数组数据,(模仿后端传递的数据)
接下来我们要将这个数据传递给子组件
接下来我们再来设置子组件的区域插槽:
接下来看效果:
这样就能通过插槽来对父级组件的数据进行传递处理了。
好了,到这里相信你也会使用了。欢迎留言您的见解和指出错误,谢谢!
vue的组件创建和使用的更多相关文章
- Vue全局组件创建三种方法
<my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
- vue组件创建学习总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- Vue系列之 => vue组件创建
创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- Vue.js——6.创建组件
Vue组件组件就是为了拆分Vue实例的代码量,能够不同的功能定义不同的组件创建组件的方法 1. // 创建组件 let com1=Vue.extend({ template:'<h1>he ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
随机推荐
- [转帖]深入浅出全面解析RDMA
深入浅出全面解析RDMA 置顶 2018年06月04日 11:36:54 MasterT-J 阅读数 17193更多 所属专栏: RDMA RDMA(RemoteDirect Memory Acc ...
- 02-Zookeeper介绍及安装
1 Zookeeper介绍 ZooKeeper是为分布式应用所设计的高可用.高性能且一致的开源协调服务,它提供了一项基本服务:分布式锁服务.分布式应用可以基于它实现更高级的服务,实现诸如同步服务.配置 ...
- vue第一篇(搭建vue开发环境)
1.下载node并安装 下载地址: https://nodejs.org/zh-cn/ 下载后双击文件安装 2.检查是否安装成功 node -v v10.16.0 npm -v 6.9.0 如果能正常 ...
- MySQL 中 savepoint 的使用
介绍 savepoint 结点名; # 设置保存点,并和rollback结合使用,实现回滚到指定保存点 rollback to 结点名; # 回滚到指定点 样例演示 USE human; ; sta ...
- vue : 无法加载文件 C:\Users\lihongjie\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 htt ps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + vue init webpack vue_p
以管理员方式打开powershell 运行命令:set-ExecutionPolicy RemoteSigned 出现: 执行策略更改执行策略可帮助你防止执行不信任的脚本.更改执行策略可能会产生安全风 ...
- Python 入门 之 初识面向对象
Python 入门 之 初识面向对象 1.初识面向对象编程 (核心--对象) (1)观察以下代码: # 面向过程编程 s = "alexdsb" count = 0 for i i ...
- python之函数、面向对象
学习python到了函数这一块进度有所放缓,主要还是想理解透彻,毕竟直觉告诉我函数是python是其中的关键,不管是模块.还是包.或者是库,都是建立在若干个函数定义上面. 章节后面就是关于面向对象编程 ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Shell随机生成字符串
随机生成18位的字符串,数字 大小写字符 斜线 password=`openssl rand -base64 |-`
- Centos7:配置防火墙
firewalld的基本使用 启动: systemctl start firewalld 关闭:systemctl stop firewalld 查看状态: systemctl status fire ...