一周精通Vue(二)组件访问、插槽、组件作用域、模块化
组件之间的访问方式
-
$children
父组件通过 this.$children[index] 可以访以对象的形式问子组件 一般来说index取值会有不稳定性
-
$.refs(常用)
父组件通过 this.$refs.name name为ref的值 通过给子组件添加ref属性来获取自定组件对象 去操作
-
$.parent
子组件通过 this.$parent 访问父组件 拿到父组件对象
-
$.root
子组件通过 this.$root方法来访问根组件 即Vue实例
插槽
-
slot 标签
表示这个是一个插槽 基本使用:<slot></solt> 如果有多个值,同时放入到组件进行替换时 一起作为替换元素
<div id="app"> <cpn> <!-- 插槽赋值--> <button> 按钮</button> </cpn> <!-- 默认会将所有内容替换到插槽--> <cpn> <div>我是div</div> <button>新按钮</button> </cpn> <!-- 执行插槽替换--> <cpn> <button slot="s1">这个s1插槽的按钮</button> </cpn> </div> <template id="my-cpn"> <div> <!-- 设置插槽的默认值--> <slot>我是一个插槽</slot> <!-- 如果要使用多个插槽就需要给每个插槽指定name属性--> <slot name="s1">我是一个插槽</slot> <slot name="s2">我是一个插槽</slot> </div> </template> <script> const vm = new Vue({ el: "#app", data: {}, components: { cpn: { template: '#my-cpn', data() { return {name: '子组件'} } } } }); </script>
- 组件的作用域
在当前模板内不管引用任何组件 只要使用到变量 一定是当前模板所绑定的组件
每一个模板之间的作用域是相互隔离的,
如果想引用子组件的数据就需要进行 template引用 -
作用域插槽
父组件替换插槽的标签,但是内容由子组件来提供
template引用:- 在子组件模板中使用 来绑定子组件内的数据
- 然后在引用处 使用 进行引用子组件插槽对象
- 通过 slot.data 获取子组件的数据对象
模块化
-
为什么要用模块化?
由于全局变量不同文件之间的变量相互影响 导致变量覆盖
- ES6的模块化 导入和导出
// file : a.js var name = 'tim' var age = 23 function sum(num1, num2){ return num1 + num2; } // 导出 方式1 export { name, age, sum } // 导出 方式2 export var num1 = 100 export var page = 10 // 导出方法 export function sub (n1, n2){ return n1 - n2 } // 导出类 export class dog { run(){ console.log('奔跑'); } } export default sum() // export default 导出的内容只有一个 也只能有一个 // file : b.js // 导入 import {name, age, num1} from './a.js' console.log(name); console.log(age); console.log(num1); console.log(sub(num1, age)); // 导入 export default 内容 import sm from './a.js' sm(1, 2) // 如果要使用export 和 import // 就必须要在引入js的时候设置 type='module' 属性 // 全部导入 import * from './a.js'
补充
-
v-slot
在vue v2.6.0中,新引入了v-slot指令,他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性
// 根组件 <template> <div> <mo> <template v-slot:header="slotProps"> <h1>{{slotProps.header + ' ' + msg}}</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </mo> </div> </template> <script> import mo from './module.vue' export default { components: { mo }, data() { return { msg: '这是根组件的消息' } } } </script> // 子组件 <template> <div> --header start-- <header> <slot name="header" :header="header"></slot> </header> --header over-- <div></div> --default start-- <slot></slot> --default over-- <div></div> --footer start-- <footer> <slot name="footer"></slot> </footer> --dooter over-- </div> </template> <script> export default { data() { return { header: '来自子组件的头部消息' } } } </script> <style scoped> </style>
- 组件中可以使用template标签,加v-slot指令制定具名插槽,当没有指定插槽name时,默认出口会带有隐含的名字“default”。
- 根组件可以利用v-slot:header="slotProps"接受组件中的消息,组件中只需要在就可以了
- 如果被提供的内容只有一个默认插槽时,组件的标签可以直接被当做插槽的模板来使用
- 动态参数也可是使用到插槽当中
- v-slot的缩写是#,但是如果使用#的话,必须始终使用具插槽来代替
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
2019.2版Pycharm设置默认模板
先进入pycharm软件,然后左上角file按钮里面 点击settings选项 一些参数介绍 ${PROJECT_NAME} - 当前Project名称; ${NAME} - 在创建文件的对话框中指定的文件名; ${USER} - 当前用户名; ${DATE} - 当前系统日期; ${TIME} - 当前系统时间; ${YEAR} - 年; ${MONTH} - 月; ${DAY} - 日; ${HOUR} - 小时; ${MINUTE} - 分钟; ${PRODUCT_NAME} - 创建文件的IDE名称; ${MONTH_NAME_SHORT} - 英文月份缩写, 如: Jan, Feb, etc; ${MONTH_NAME_FULL} - 英文月份全称, 如: January, February, etc; 之后创建新的模块我们就可以看到这样的效果:
- 下一篇
我看JAVA 之 基本数据类型与封装类型
我看JAVA 之 基本数据类型与封装类型 注:基于jdk11 java提供了8中基本数据类型,其中1个布尔类型,6个数字类型,1个字符类型。同时jdk为这8种基本数据类型提供了相应的封装类型。 boolean & Boolean boolean 长度为1位 数据范围:只有两个值true、false 默认值为false Boolean boolean的封装类型 实现了Serializable、Comparable接口 重要的成员变量 public static final Boolean TRUE = new Boolean(true); public static final Boolean FALSE = new Boolean(false); private final boolean value; public static final Class<Boolean> TYPE = (Class<Boolean>) Class.getPrimitiveClass("boolean"); 重要的方法 @HotSpotIntrinsicCandidate...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果