详解vue slot插槽的使用方法
官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- 单slot -->
<v-one>
<!-- 这里的所有内容会替换掉slot -->
<p>初始化段落一</p>
<p>初始化段落二</p>
</v-one>
<!-- 渲染结果 -->
<!-- <div>
<h1>组件标题</h1>
<p>初始化段落一</p>
<p>初始化段落二</p>
<p>组件段落内容</p>
<p>I am one</p>
</div> -->
<!-- 具名slot -->
<v-two>
<p slot="nav">我是导航</p>
<p slot="main">我是内容</p>
<p slot="footer">我是底部</p>
</v-two>
<!-- 渲染结果 -->
<!-- <div>
<nav>
<p>我是导航</p>
</nav>
<main>
<p>我是内容</p>
</main>
<footer>
<p>我是底部</p>
</footer>
</div> -->
<!-- 作用域插槽 -->
<v-three>
<!-- 父组件默认无法使用子组件数据 -->
<template scope="props">
<p>{{props.text}}</p>
</template>
</v-three>
<!-- 渲染结果 -->
<!-- <div><p>I am three</p></div> -->
</div>
</div>
<template id="one">
<div>
<h1>组件标题</h1>
<slot></slot>
<p>组件段落内容</p>
<p>{{one}}</p>
</div>
</template>
<!-- 具名slot -->
<template id="two">
<div>
<nav>
<slot name="nav"></slot>
</nav>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<!-- 作用域插槽 -->
<template id="three">
<div>
<!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 -->
<slot :text="three"></slot>
</div>
</template>
<script>
new Vue({
el: '#app',
components: {
'v-one': {
template: '#one',
data() {
return {
'one': 'I am one'
}
}
},
'v-two': {
template: '#two',
data() {
return {
'two': 'I am two'
}
}
},
'v-three': {
template: '#three',
data() {
return {
'three': 'I am three'
}
}
}
}
});
</script>
</body>
</html>
单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。
具名slot只是给slot加了name属性，在使用的时候可以引入多个。
作用域slot就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。
渲染后效果图，可以直接自己在浏览器运行查看效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js之slot深度复制详解
前言 在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容.slot就是"插槽"的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容. 例如我们定义一个组件MyComponent,其包含一个slot: Vue.component('MyComponent', { template: ` <div> <slot></slot> </div> ` }) 当调用<MyComponent>123&
-
详解vue slot插槽的使用方法
官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"><
-
详解Vue slot插槽
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件(传的是HTML格式). 父组件App: 子组件Category: 在父组件或者子组件里都可以给插槽中的内容设置样式,效果一样 作用域插槽: 1.理解:数据在组件的自身(Category),但根据数据生成的结构需要组件的使用者(APP)来决定.(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定) 子组件在给父组件传数据 子: 父: 使用atguigu这样一
-
详解Vue项目引入CreateJS的方法（亲测可用）
1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS
-
详解Vue开发网站seo优化方法
因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js.vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR. 目前基于vue的方案是Nuxt.js,同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前,页面上是有数据可让爬虫进行爬取 方法一.利用prerender-spa-p
-
详解vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div> </son-tmp> 单个插槽 父组件app.vue <template> <div id="app"> <test-slot> <span>我是父组件里的文字,但是我要被放到子组件里</span> </t
-
详解Vue组件插槽的使用以及调用组件内的方法
组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像
-
详解Vue 非父子组件通信方法（非Vuex）
一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus
-
详解vue中localStorage的使用方法
什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后
-
详解vue添加删除元素的方法
相关版实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ displa
-
详解vue组件中使用路由方法
vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板中设置路由出口的命令如下 7.实现添加组件步骤如下 8.把组件添加到路由表的操作步骤如下 以上8点就是关于vue组件中使用路由的步骤,感谢大家对我们的支持.