插槽样式_Vue系列：插槽

最新推荐文章于 2024-07-26 13:02:41 发布

F杂谈

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量453

点赞数

文章标签：插槽样式

本文链接：https://blog.csdn.net/weixin_35892206/article/details/112632349

版权

需要理解的知识

模块化

每个JS文件中都有自己的变量，如果不使用模块化，容易造成js内部属性相同导致的不可预知问题。
将自己编写的js文件封装为属于自己的模块，通过模块调用属性和方法。
常用的模块化规范：CommonJS、AMD、CMD、ES的Modules。

CommonJS

CommonJS导入和导出操作

导出

module.exports = {
    flag: true,
    test(a,b){
        return a+b
    },
    demo(a,b){
        return a*b
    }
}

导入

//CommonJS模块
let {test,demo,flag} = require('moduleA');

//等同于
let _mA = require('moduleA');
let test = _ma.test;
let demo = _mA.demo;
let flag = _mA.flag;

需要掌握的知识

插槽

基础使用

通过slot属性指定插槽区域。

slot中的内容是默认值，如果在调用时没有填写内容，则显示默认内容。

<body>
<div id="app">
<sub1>替换内容sub1>
div>
body>
<template id="sub1">
<div>
默认值
<slot>slot>
div>
template>
<script>const app = new Vue({
		el: '#app',
		components:{
			sub1:{
				template:'#sub1'
			}
		}
	})script>

具名插槽

可以指定插槽的名称，在使用时通过【slot】属性指定具名插槽要展示的内容。如果没有指定【slot】，则会替换匿名插槽中的内容。

<body>
<div id="app">
<sub1><span slot='test1'>哈哈哈span><span slot='test2'>嘿嘿嘿span>sub1>
div>
body>
<template id="sub1">
<div>
默认值
<slot name="test1">slot>
<slot name="test2">slot>
div>
template>

作用域插槽

作用域插槽是指父模板中使用子模板作用域的数据。

父模板定义展示样式，子模板提供数据：在子模板中绑定一个属性，传入需要使用的数据。在调用时通过【slot-scope】属性接收数据，从而在父模板中使用子模板的数据。

<body>
<div id="app">
<use1>
<template slot-scope="sss">
				{{sss.abc.join(' - ')}}
template>
use1>
<use1>use1>
<use1>use1>
div>
body>
<template id="use1">
<div>
<slot :abc="stuList">
<ul>
<li v-for="item in stuList">{{item}}li>
ul>
slot>
div>
template>

<script>const vue = new Vue({
		el: '#app',
		components:{
			use1:{
				template:'#use1',
				data(){return {
						stuList:['user1','user2','user3']
					}
				}
			}
		}
	})script>

F杂谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插槽样式_Vue系列：插槽

需要理解的知识模块化每个JS文件中都有自己的变量，如果不使用模块化，容易造成js内部属性相同导致的不可预知问题。将自己编写的js文件封装为属于自己的模块，通过模块调用属性和方法。常用的模块化规范：CommonJS、AMD、CMD、ES的Modules。CommonJSCommonJS导入和导出操作导出module.exports = { flag: true, test(a,...
复制链接

扫一扫