vue父子传值，slot插槽的使用

简单记个笔记

抽离出来的组件

HeaderTop
<template><header class="header"><slot name="left" ></slot><span class="header_title"><span class="header_title_text ellipsis">{{title}}</span>//title接受属性值</span><slot name="right"></slot>//slot接受标签</header>
</template><script>
export default {props:{title:String//接受父组件的属性值}
};
</script>

调用HeaderTop组件，并给slot插入值

<template>
<HeaderTop title="昌平区北七家宏福科技园(337省道北)">//调用子组件，并传值<span class="header_search" slot="left"><i class="iconfont icon-sousuo"></i></span><span class="header_login" slot="right">//slot差入标签<span class="header_login_text">登录|注册</span></span>
</HeaderTop>
```<script>
</template>
import HeaderTop from "../../components/HeaderTop/HeaderTop.vue";
export default {components: {HeaderTop,},
};
</script>

vue父子传值，slot插槽的使用相关推荐

Vue组件传值及插槽
目录组件传值父组件向子组件传值子组件向父组件传值兄弟组件间传值组件插槽父组件向子组件传递内容具名插槽作用域插槽组件传值父组件向子组件传值组件内部通过props接收传递过来的值,父 ...
vue中的slot插槽
1.无名插槽<body><div id="app">123</div><script src="https://cdn.jsde ...
【视频】vue组件之slot插槽
P11vue组件之slot插槽 https://www.bilibili.com/video/av91679349?p=11
Vue 自定义组件 —— slot插槽
父组件向子组件传递带数据的标签,当一个组件有不确定的结构时, 就需要使用 slot 技术,注意:插槽内容是在父组件中编译后, 再传递给子组件的. 一.默认插槽 <div class=" ...
vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue 文件封装 <template><div class="confirmBgc animations" :style=& ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
【Vue2-尚硅谷四】Vue ---ajax---插槽slot
文章目录 4.1,vue脚手架配置代理方法一方法二 4.2,GitHub搜索案例入口main.js App.vue Search.vue List.vue 4.3,slot插槽 4.3.1,默认 ...
vue 父子组件组件挂载组件通信 slot插槽
目录 vue 父子组件挂载父组件往子组件中传值子组件向父组件传值 this.$emit() this.$refs 父组件可以通过它直接引用注册过的子组件DOM中的数据插槽默认插槽具名插槽 v ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...

vue父子传值，slot插槽的使用

vue父子传值，slot插槽的使用相关推荐

最新文章

热门文章