如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用
当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加
这时候我们想这样往里面塞内容↓ <my-template>是我们自定义的公共组件
<my-template>
<h2>想加入一个子标题</h2>
</my-template>
但这样运行代码后,发现页面还是以前的样子,这个div并没有出现,这个时候该怎么办呢
这里我们就要用到一个vue的功能:插槽slot
slot是定义在子组件里的,用来接收父组件使用时包裹的内容
<div id="app">
<son-demo>
<h2>新增一个子标题</h2>
</son-demo>
</div> <script type="text/x-template" id="sonModel">
<h1>开始有的标题</h1>
<slot></slot> //这里就是用来接收父组件传过来的内容,我们也可以设置默认值,当父不传时显示
</script> <script>
//定义子组件
var sonDemo = {
template: "#sonModel",
}
//父组件
new Vue({
el: '#app',
components: { sonDemo },
});
</script>
这时候我们已经完成需求了,很开心,但第二天事比产品经理又来搞事情了,那就是不仅要加一个标题还要加一段内容,但这个内容并不和标题在一起中间隔了很多代码,这时候该怎么办呢
这里就要用到slot的内容分发了
<div id="app">
<son-demo>
<h2 slot="title">新增一个子标题</h2>
<div slot="body">新加内容</div>
</son-demo>
</div> <script type="text/x-template" id="sonModel">
<h1>开始有的标题</h1>
<slot name="title"></slot>
<slot name="body"></slot>
</script> <script>
//定义子组件
var sonDemo = {
template: "#sonModel",
}
//父组件
new Vue({
el: '#app',
components: { sonDemo },
});
</script>
其实我们不仅可以分发原生的html代码内容,也可以用其他子组件,在使用子组件时也加上slot=“body”,这样在body里面也会渲染出对应的子组件,这也就是组件的相互组合使用
再来看一个父组件使用scope定义子组件模板结构的例子,这里有点难理解,还是需要自己动手去写一遍才能理解深刻
看了一下官网:在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
这两个目前已被废弃但未被移除且仍在文档中的特性。
也就是把父组件使用slot时的关键字变成了v-slot,同时也加了新功能
动态参数也可以用在 v-slot
上,来定义动态的插槽名:
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用的更多相关文章
- 5.4 Components -- Wrapping Content in A Component(在组件中包裹内容)
1.有时候,你可能希望定义一个模板,它包裹其他模板提供的内容. 例如,假设我们创建一个blog-post模板,我们可以使用它来展现一个blog post: app/components/blog-po ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- vue自定义组件并使用
以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...
- 8、VUE自定义组件
1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Vue自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- vue自定义可输入的选择框组件
vue自定义可输入的选择框组件 props: 属性 说明 类型 默认值 selectDataList 下拉框中的内容 Array 空数组([]) value 输入框中的内容 String 空字符串(& ...
- [ vue ] 自定义组件的 v-model 理解
需求场景描述: 1. 在父组件 myself.vue 里面定义数据 button_val 2. 在父组件 myself.vue.里面定义按钮,它的功能是吧 button_val 的值 -1 ---- ...
随机推荐
- Instrumentation(1)
Instrumentation介绍: JavaInstrumentation指的是可以用独立于应用程序之外的代理(agent)程序来监测和协助运行在JVM上的应用程序.这种监测和协助包括但不限于获取J ...
- .net core使用Apollo做统一配置管理
做开发这么多年,经常因配置的问题引发生产环境的bug.有些年久的项目,几百个密密麻麻的配置项,经常容易搞混,有时好几个项目有好多同样的配置项,配置工作也不厌其烦.所幸,携程开源了新一代配置中心 - A ...
- jquery 判断一个元素是否在数组中 $.inarry()使用
需要判断一个元素是否在一个数组里: js indexOf()方法 如果存在 则返回该元素的下标值 如果不存在则返回-1 学习源头: http://www.w3school.com.cn/jsref/ ...
- EffictiveC++笔记 第2章
Chapter 2 构造 / 析构 / 赋值 条款 05:了解C++ 默默编写并调用哪些函数 如果你写下: class Empty{ }; 事实上编译器会帮你补全: class Empty{ publ ...
- WebGL学习之纹理贴图
为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 ...
- Python爬虫入门教程 64-100 反爬教科书级别的网站-汽车之家,字体反爬之二
说说这个网站 汽车之家,反爬神一般的存在,字体反爬的鼻祖网站,这个网站的开发团队,一定擅长前端吧,2019年4月19日开始写这篇博客,不保证这个代码可以存活到月底,希望后来爬虫coder,继续和汽车之 ...
- Java核心技术梳理-集合
一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具 ...
- mvc、mvp和mvvm
一.MVC 设计图: 可能由于MVP.MVVM的兴起,MVC在android中的应用变得越来越少了,但MVC是基础,理解好MVC才能更好的理解MVP,MVVM.因为后两种都是基于MVC发展而来的. 1 ...
- JS异步操作新体验之 async函数
1.初识 async 函数 ES6中提供了两个很好的解决异步操作的方案 Promise 和 Generator,ES2017标准中引入的 async 函数就是建立在 Promise 和 Gener ...
- 第3章 结束会话端点(EndSession Point) - IdentityModel 中文文档(v1.0.0)
该RequestUrl类可用于构造URL发送到OpenID Connect EndSession endpoint. 该CreateEndSessionUrl扩展方法支持最常用的参数: /// < ...