vue slot 在子组件中显示父组件传递的模板
父组件使用没有指定slot属性,默认为default
在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app"> <modal> <!-- 调用父组件的方法 --> <h1 @click='click'>aaa</h1></modal> <modal> <h2>bbb</h2></modal> <modal> <!-- 使用slot设置模板中的名字,会插入到指定的slot中 --> <p slot='title'>hello</p> <p slot='content'> world </p> </modal> <modal></modal> </div> <template id="modal"> <!-- 使用slot在子组件中显示父组件传过来的模板 --> <div> modal <slot name='default'>如果没有会使用这个默认值</slot> <h1> title: <slot name='title'> </slot> </h1> content: <slot name='content'></slot> </div> </template> <script type="text/javascript"> let modal = { template: '#modal' } new Vue({ el: '#app', components: { // es 简写 ,只写一个的意思为 // modal:modal modal }, methods: { click() { console.log('aaa') } } }) </script> </body> </html>
总结
以上所述是小编给大家介绍的vue slot 在子组件中显示父组件传递的模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- Vue组件中slot的用法
- 详解Vue学习笔记入门篇之组件的内容分发(slot)
- Vue.js中组件中的slot实例详解
- Vuejs第十一篇组件之slot内容分发实例详解
相关推荐
-
详解Vue学习笔记入门篇之组件的内容分发(slot)
介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess
-
Vue.js中组件中的slot实例详解
Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活
-
Vuejs第十一篇组件之slot内容分发实例详解
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <
-
Vue组件中slot的用法
下面给大家介绍Vue组件中slot的用法 主要是让组件的可扩展性更强. 1. 使用匿名slot 2. 给slot加个名字 如果不在有slot的组件里加入任何标签,slot什么都不会显示的. 总结 以上所述是小编给大家介绍的Vue组件中slot的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: 详解Vue学习笔记入门篇之组件的内容分发(slot) Vue.js中组件中的slot实例详解 Vuejs第十一篇组件之
-
vue slot 在子组件中显示父组件传递的模板
父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&
-
详解vue中在父组件点击按钮触发子组件的事件
我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu
-
vue.js 子组件无法获取父组件store值的解决方式
子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s
-
vue子组件如何获取父组件的内容(props属性)
目录 子组件如何获取父组件的内容 props属性 vue父→子组件的props传值 需求1 需求2 子组件如何获取父组件的内容 props属性 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 想要引用父组件需要: <bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{ props:{ 'myMs
-
Vue子组件props从父组件接收数据并存入data
目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是
-
Vue2.x中的父组件传递数据至子组件的方法
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro
-
Vue子组件监听父组件值的变化
目录 子组件监听父组件值变化 子组件监听父组件的值同步更新数据 子组件监听父组件值变化 子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"], watch: { a(oldValue, newValue) { // oldValue a旧值 // newValue a新值 } } 子组件监听父组件的值同步更新数据 子组件 props : ["data&
-
vue3.0 子组件如何修改父组件传递过来的值
目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样
-
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&
-
VUEJS 2.0 子组件访问/调用父组件的实例
有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&
随机推荐
- AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
- 浅析Java和Scala中的Future
- javascript向flash swf文件传递参数值注意细节
- Oracle数据库密码文件的使用和维护
- 详解spring batch的使用和定时器Quart的使用
- json格式数据的添加,删除及排序方法
- PHP中设置时区,记录日志文件的实现代码
- php empty函数判断mysql表单是否为空
- 控制Android LED灯颜色的代码实例
- dotNet中的反射用法入门教程
- Mac os 解决无法使用localhost连接mysql问题
- Android编程实现webview执行loadUrl时隐藏键盘的workround效果
- jQuery实现判断滚动条到底部
- 详解Java的Hibernat框架中的Map映射与SortedMap映射
- jQuery实现用方向键控制层的上下左右移动
- Oracle自动备份脚本
- jQuery 插件开发指南
- windows环境下memcache配置方法 详细篇
- C#泛型与非泛型性能比较的实例
- 如何在XP系统中执行干净启动
其他
- 外部js调用vue的变量
- iis 配置 .ofd mimetype
- uiscrollview uibutton 无法点击
- numpy中ndim数组的维度到底指的是什么
- nn.Conv1d用法
- 怎么更改脚本里的设置
- r 数据库数值型转为字符型
- 请简要描述汇编语言程序的开发过程
- vue富文本框图片上传,
- pythonn车牌识别完整代码
- docker-compose安装fastdfs
- goland 激活网址
- spring boot 收到控制事务
- spring.factories在哪里
- android 隐私政策 页面
- wx.request get参数 Java后台接收
- mybatisplus 模糊查询 _ %, 无法匹配
- 小程序元素滚动条一直显示
- c语言 2048 background()
- 微信小程序input输入框 禁止输入 怎么设置