Vue三大核心之三(插槽)

1.具名组件
我们一个组件里需要多个插槽,就需要用到slot的name属性

<!--子组件定义-->
<div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div><!--父组件-->
<div><template v-slot:header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><p>And another one.</p><template v-slot:footer><p>Here some contact info</p></template>
</div>

2.作用域组件

自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法在这里
有时让插槽内容能够访问子组件中才有的数据是很有用的

//父组件使用子组件的值
<current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</current-user//子组件向父组件传递值
<span><slot v-bind:user="user">{{ user.lastName }}</slot>
</span>

案例

子组件定义插槽

<template><div><!--具名插槽--><slot name="title"/><!--作用域插槽 向父组件传递值--><slot name="item" v-bind="{value:'vue'}" /></div>
</template><script>
export default {name:"test"
}
</script><style></style>

父组件使用子组件插槽

<template>
<div id="app">{{msg}}<Solt><template v-slot:title><h1>这段内容会填充到子组件中</h1></template><!--使用props来接收{value:'vue'}值--><template v-slot:item="props"><p>======={{props}}</p></template></Solt></div>
</template><script>
//导入子组件
import Solt from './components/Solt'
export default {name: 'App',data() {return {msg: "hello 入门小站",name:"name",type:"入门",list:['入门','小站'],view:true}},methods: {},components: {Solt //必须要定义子组件}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

源码:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-three-core

Vue三大核心之三(插槽)相关推荐

Vue三大核心概念之二(事件)
1.普通事件 @click,@input,@change,@xxx等事件,经过this.$emit('xxx',-)触发写法案例: <div id="example-3"& ...
Vue三大核心概念之一(属性)
1.自定义属性props:即组件中声明的属性,子类接受父类的值 2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载 3.特殊属 ...
Vue组件三大核心概念
Vue的核心三大基础概念为:属性.时间和插槽.本文就这三个方面进行深入解析,来了解vue. 一.属性 1.自定义属性props props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种 ...
腾讯AI Lab发布三大核心战略，与自然科研达成战略合作
来源:腾讯AI实验室 3月15日,腾讯AI Lab第二届学术论坛在深圳举行,聚焦人工智能在医疗.游戏.多媒体内容.人机交互等四大领域的跨界研究与应用.全球30位顶级AI专家出席,对多项前沿研究成果进行 ...
汤晓鸥谈深度学习三大核心要素：算法设计、高性能的计算能力以及大数据
汤晓鸥谈深度学习三大核心要素:算法设计.高性能的计算能力以及大数据 2017-05-21 15:02:28 深度学习 0 0 0 昨日(5月20日),香港中文大学汤晓鸥教授莅临 2017C ...
java NIO模型和三大核心原理
1.NIO (1)基本介绍 1)Java NIO全程 java non-blocking IO,是指JDK提供的新API.从JDK1.4开始,Java提供了一系列改进的输入/输出的新特性,被统称为NI ...
Netty专题-（2）NIO三大核心
在之前的文章Netty专题-(1)初识Netty中提到了NIO三大核心Selector . Channel 和 Buffer,所以在这一章重点会是介绍这三个核心. 1 缓冲区(Buffer) 1.1 ...
企业经营私域运营的三大核心系列直播课
摩天,用友旗下社会化的企业数智化学习认证社区,提供数智营销.智慧医疗.数智金融.智能制造.项目管理等精品课程,数智化人才上摩天!https://mot.yonyou.com/ #企业经营私域运营的三大 ...
java 重用性_Java开发重用性必备的三大核心知识点
互联网开发行业的人在问我提高java代码可重用性有哪些方法措施,那今天我就给大家详细讲下提高java代码可重用性的措施吧,希望不懂的可以从中学习加以理解,懂的也可以加以巩固下这些知识点,我把提高jav ...

Vue三大核心之三(插槽)

案例

Vue三大核心之三(插槽)相关推荐

最新文章

热门文章