vue学习笔记之slot插槽用法实例分析
本文实例讲述了vue slot插槽用法。分享给大家供大家参考，具体如下：
不使用插槽，在template中用v-html解析父组件传来的带有标签的content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child content="<p>Rachel</p>"></child>
</div>
</body>
</html>
<script>
Vue.component('child', {
props: ['content'],
template: '<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>'
})
var vm = new Vue({
el: '#app'
})
</script>
使用插槽，如果父组件为空，就会显示slot中定义的默认内容
<child>
<p>Rachel</p>
</child>
Vue.component('child', {
template: '<div>
<p>hello</p>
<slot>默认内容</slot>
</div>'
})
使用插槽添加header和footer，使用‘具名插槽'，也就是给插槽起个名字，各找各的位置。此处也可以写默认值，如果父组件没有对应的插槽内容的话，会显示子组件定义的插槽的默认值。
<div id="app">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
Vue.component('body-content', {
template: '<div>
<slot name="header">default header</slot>
<div class="content">content</div>
<slot name="footer">default footer</slot>
</div>'
})
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
-
本文向大家介绍vue学习之Vue-Router用法实例分析，包括了vue学习之Vue-Router用法实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考，具体如下： Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router-link>它可以在<router-view
-
本文向大家介绍Vue作用域插槽slot-scope实例代码，包括了Vue作用域插槽slot-scope实例代码的使用技巧和注意事项，需要的朋友参考一下 vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到 （https://cn.vuejs.org/v2/guide/components.html#单个插槽） 作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上
-
本文向大家介绍ES6学习笔记之let与const用法实例分析，包括了ES6学习笔记之let与const用法实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了ES6学习笔记之let与const用法。分享给大家供大家参考，具体如下： 在ES6中不是var，而是通过let来声明变量，用const来声明常量，有如下一些不同： 1、let与const作用域只限于当前代码块{}，而var则没有这
-
本文向大家介绍JavaScript学习笔记之DOM操作实例分析，包括了JavaScript学习笔记之DOM操作实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. "D":Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建
-
本文向大家介绍详解vue slot插槽的使用方法，包括了详解vue slot插槽的使用方法的使用技巧和注意事项，需要的朋友参考一下 官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观 单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。 具名slot只是给slot加了name
-
本文向大家介绍Android学习笔记之ActionBar Item用法分析，包括了Android学习笔记之ActionBar Item用法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android ActionBar Item用法。分享给大家供大家参考，具体如下： 这里主要讲述ActionBar Item的使用方法。在手机上，按Menu键出现Menu菜单，但是在平板中可以把菜单放在