Vue（三）制作模板-插槽slot

1、制作模板

vue中的模板使用template来实现

1、选项模板

<div id="app">
</div><script type="text/javascript">// 实例化new Vue({el: '#app',data: {message: 'hello'},template:`<h1 style="color:red">我是选项模板</h1>`});
</script>

2、`<template>`标签模板

<div id="app"><template id="demo2"><h2 style="color:red">我是template标签模板</h2></template>
</div><script type="text/javascript">// 实例化new Vue({el: '#app',data: {message: 'hello'},template:'#demo2'});
</script>

3、`<script>`标签模板

<div id="app">
</div><script type="x-template" id="demo3"><h2 style="color:red">我是script标签模板</h2>
</script><script type="text/javascript">// 实例化new Vue({el: '#app',data: {message: 'hello'},template:'#demo3'});
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之组件</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><!-- template标签模板 --><template id="demo2"><h2 style="color:red">我是template标签模板</h2></template>
</div><!-- script标签模板 -->
<script type="x-template" id="demo3"><h2 style="color:red">我是script标签模板</h2>
</script><script type="text/javascript">// 实例化new Vue({el: '#app',data: {message: 'hello'},// 选项模板//template:`<h1 style="color:red">我是选项模板</h1>`//template:'#demo2'template:'#demo3'});
</script>
</body>
</html>

2、插槽slot

插槽，也就是slot，是组件的一块HTML模板，一个slot最核心的两个问题是显示不显示和怎样显示

1、单个slot

单个插槽，别名默认插槽、匿名插槽，不用设置name属性

<div id="app"><children1><span>12345</span></children1>
</div><script type="text/javascript">var app = new Vue({el: '#app',components: {children1: {template: "<button><slot></slot>单个插槽</button>"}}});
</script>

2、具名slot

插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置

<div id="app"><children2><span slot="first" @click="tobeknow">12345</span><span slot="second">56789</span></children2>
</div><script type="text/javascript">var app = new Vue({el: '#app',methods: {tobeknow: function () {console.log("It is the parent's method");}},components: {children2: {//这个无返回值，不会继续派发  template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"}}});
</script>

3、作用域slot

vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。

<div id="app"><!-- 将数据传递给组件 --><tb-list :data="data"><!-- 获取slot上面的值 --><template slot-scope="scope"><p>索引：{{JSON.stringify(scope)}}</p><p>索引：{{scope.$index}}</p><p>姓名:{{scope.row.name}}</p><p>年龄: {{scope.row.age}}</p><p>性别: {{scope.row.sex}}</p></template></tb-list>
</div><script type="text/javascript">var app = new Vue({el: '#app',data: {data: [{name: 'kongzhi1',age: '29',sex: 'man'}]},components: {// 作用域slot'tb-list': {template:`<ul><li v-for="(item, index) in data"><slot :row="item" :$index="index"></slot></li></ul>`,// 获取值props: ['data']}}});
</script>

4、完整代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之slot</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><children1><span>12345</span></children1><children2><span slot="first" @click="tobeknow">12345</span><span slot="second">56789</span></children2><!-- 将数据传递给组件 --><tb-list :data="data"><!-- 获取slot上面的值 --><template slot-scope="scope"><p>索引：{{JSON.stringify(scope)}}</p><p>索引：{{scope.$index}}</p><p>姓名:{{scope.row.name}}</p><p>年龄: {{scope.row.age}}</p><p>性别: {{scope.row.sex}}</p></template></tb-list>
</div><script type="text/javascript">var app = new Vue({el: '#app',data: {data: [{name: 'kongzhi1',age: '29',sex: 'man'}]},methods: {tobeknow: function () {console.log("It is the parent's method");}},components: {// 单个slotchildren1: {template: "<button><slot></slot>单个插槽</button>"},// 具名slotchildren2: {template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"},// 作用域slot'tb-list': {template:`<ul><li v-for="(item, index) in data"><slot :row="item" :$index="index"></slot></li></ul>`,// 获取值props: ['data']}}});
</script>
</body>
</html>

Vue（三）制作模板-插槽slot相关推荐

VUE之组件（插槽slot与可复用组件）
插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 <div id="app"><blog></blog></div>& ...
Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
【VUE3】保姆级基础讲解（二）计算属性，vue组件，vue-cli脚手架，组件通讯，插槽slot
目录计算属性computed 侦听器watch 对象监听组件注册全局组件注册局部组件 Vue-CLI脚手架安装和使用 .browserslistrc main.js jsconfig.jso ...
一次性讲明白vue插槽slot
详解vue中的插槽slot 一.前言二.插槽是什么三.插槽的作用三.插槽的分类 1.默认插槽 2.具名插槽 3.作用域插槽以下文章来自掘金作者:JH30K 链接:https://juejin ...
vue插槽 - slot
vue插槽 - slot 前言一.插槽内容二.编译作用域三. 后备内容四. 具名插槽五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...
vue 插槽 slot 的用法
vue 插槽 slot 的用法一.简单定义.使用 slot 二.slot 变量传值三.跨组件传递 slot 方法1: 多定义一个中间插槽方法2:使用 scopedSlots 字段传递作用域插槽 ...
Vue在插槽slot时报错：Component template should contain exactly one root element. If you are using v-ifen
Component template should contain exactly one root element. If you are using v-if on multiple elemen ...
vue - 插槽slot
描述:插槽,也就是slot,是组件的一块HTML模板,一个slot最核心的两个问题是显示不显示和怎样显示插槽分类: 1.1 单个插槽(单个插槽,别名默认插槽.匿名插槽,不用设置name属性) 1.2 ...
Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...

Vue（三）制作模板-插槽slot

1、制作模板

1、选项模板

2、`<template>`标签模板

3、`<script>`标签模板

4、完整示例代码

2、插槽slot

1、单个slot

2、具名slot

3、作用域slot

4、完整代码示例

Vue（三）制作模板-插槽slot相关推荐

最新文章

热门文章

Vue（三）制作模板-插槽slot

1、制作模板

1、选项模板

2、<template>标签模板

3、<script>标签模板

4、完整示例代码

2、插槽slot

1、单个slot

2、具名slot

3、作用域slot

4、完整代码示例

Vue（三）制作模板-插槽slot相关推荐

最新文章

热门文章

2、`<template>`标签模板

3、`<script>`标签模板