父页面:

<template>
<div class="parent">
<p>父组件</p>
<child>
<div slot='s1'>
<p >插槽1</p>
<p >插槽101</p>
</div>

<p slot='s2'>插槽2</p>
<p slot-scope='props' slot='s3'>
{{props.text}}
</p>
</child>
</div>
</template>

<script>
import child from './child'
export default{
name:'parent',
data(){
return{

}
},
methods:{

},
components:{
child
}
}
</script>

<style>
</style>

子页面:

<template>
<div class="child">
子组件组件
<slot name='s1'></slot>
<hr />
<slot name='s2'></slot>
<slot>子页面自己玩</slot>
<slot name='s3' text='子页面传父页面'></slot>
</div>
</template>

<script>
export default{
name:'child',
data(){
return{

}
},
methods:{

}
}
</script>

<style>
</style>

vue插槽,也就是子页面、父页面相互传值的另一写法的更多相关文章

  1. iframe中子页面父页面里函数互调

    在iframe中很多要用的子页面父页面函数互调的情况,下面看一下各自用法,本人写个人网站的时候用过其他场景尚未试过 子页面调父页面 function fu(){ alert('父'); } funct ...

  2. react-native页面之间的相互传值

    react-native页面之间的相互传值 之前在自己学习react-native的时候,在页面跳转和传值问题上花了一段时间去网上搜索和查找资料,自己总结了两个方法.可以参考 https://blog ...

  3. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  4. js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.a ...

  5. js中子页面父页面方法和变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写 window.parent.aa ...

  6. js中子页面父页面方法 变量相互调用(转)

    原文:https://www.cnblogs.com/huangshuqiang/p/5734358.html (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名w ...

  7. Vue组件通信之子传父

    子组件向父组件通信主要通过自定义事件实现. 这里我记录一个小例子来帮助自己记忆. 通过点击子组件的按钮去执行父组件的函数并使用子组件传来的数据. 子组件定义如下: <template id=&q ...

  8. Django+ajax 返回json数据挨个显示在页面及页面和后台相互传值

    通过Ajax传到后台一个值,根据该值返回数据库表中的某一列的值,然后逐个显示到页面,并且给每个加上超链接,可以进行点击查看详细信息 1.通过Ajax传到后台一个值,红色部分为往Django后台传值,蓝 ...

  9. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

随机推荐

  1. Shiro+Redis实现tomcat集群session共享

      一.背景 当我们使用了nginx做项目集群以后,就会出现一个很严重的问题亟待解决,那就是:tomcat集群之间如何实现session共享的问题,如果这个问题不解决,就会出现登陆过后再次请求资源依旧 ...

  2. data-key

    在foreach或者each循环中给按钮赋予值 html中:data-key="@config.key" js里获取值: var key = $(this).data(" ...

  3. 饮冰三年-人工智能-linux-02 初始Linux

    参考博客:https://www.cnblogs.com/linhaifeng/articles/6045600.html 1:初始Linux命令 右击,开启终端,或者ctrl+alt[F1-F6]的 ...

  4. Python初探list

    今天要说一个新概念--list,中文可以翻译成列表,是用来处理一组有序项目的数据结构.想象一下你的购物清单.待办工作.手机通讯录等等,它们都可以看作是一个列表.说它是新概念也不算确切,因为我们之前已经 ...

  5. python字符串之join

    函数:string.join() Python中有join()和os.path.join()两个函数,具体作用如下: join():连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连 ...

  6. 金蝶k3完全卸载,注册表手动清理

    HKEY_LOCAL_MACHINE\SOFTWARE\KINGDEE 如果操作系统是64位的,在注册表目录:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node下面还有一个 ...

  7. alpha冲刺6/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...

  8. nginx proxy_pass指令’/’注意事项

    1. proxy_pass配置说明 不带/ location /test/ { proxy_pass http://t6:8300; } 带/ location /test/ { proxy_pass ...

  9. Kudu原理-kudu的底层数据模型

    Kudu自身的架构,部分借鉴了Bigtable/HBase/Spanner的设计思想.论文的作者列表中,有几位是HBase社区的Committer/PBC成员,因此,在论文中也能很深刻的感受到HBas ...

  10. web实现下拉列表多选加搜索

    实现如图所示的下拉多选还能带有搜索功能. <!DOCTYPE html> <html> <head> <title></title> < ...