父页面:

<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. gitlab使用--汉化及修改端口

    汉化思路:去gitlab汉化社区下载对应的汉化版本,这个文件和当前版本对比形成一个补丁,打入到当前配置文件中 1.查看当前gitlab版本 head  -1(数字)    /opt/gitlab/ve ...

  2. SpringBoot整合Kafka

    一.准备工作 提前启动zk,kafka,并且创建一个Topic("Hello-Kafk") bin/kafka-topics.sh --create --zookeeper 192 ...

  3. WCF与WebService的区别(转)

    1.WebService:严格来说是行业标准,不是技术,使用XML扩展标记语言来表示数据(这个是夸语言和平台的关键).微软的Web服务实现称为ASP.NET Web Service.它使用Soap简单 ...

  4. Spring boot国际化

    国际化主要是引入了MessageSource,我们简单看下如何使用,以及其原理. 1.1 设置资源文件 在 properties新建i18n目录 新建message文件: messages.prope ...

  5. hibnet 自动生成表格

    在pom文件中添加相关的依赖 在application.yml文件中添加配置信息 新建实体类Boy 项目运行,mysql就产生了一个boy表. 需要注意的是:当配置文件ddl-auto: create ...

  6. 基于Kubernetes集群部署skyDNS服务

    目录贴:Kubernetes学习系列 在之前几篇文章的基础,(Centos7部署Kubernetes集群.基于kubernetes集群部署DashBoard.为Kubernetes集群部署本地镜像仓库 ...

  7. JS合并数组的几种方法及优劣比较

    本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: var q = [ 5, 5, 1, 9, 9, 6, 4 ...

  8. iframe获取元素

    原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...

  9. 事件监听addEventListener----attachEvent

    第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...

  10. netty04(重点来了、指定某个客户端发信息或者群发)小声嘀咕~~我也是从零开始学得、、、想学习netty的又不知道怎么下手的童鞋们~~

    还是和上几篇一样,先给出前面笔记的连接,有没看的可以去看看再来! netty01   . netty02  .netty03 看到这里.你基本上可以使用netty接受信息和根据对应的信息返回信息了 接 ...