父页面:

<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. txt提取相同内容、不同内容

    findstr >相同部分.txt findstr >%~n2多余部分.txt findstr >%~n1多余部分.txt

  2. 数据库和linux对大小写的区分

  3. IDM的Google商店插件

    官方扩展链接:https://chrome.google.com/webstore/detail/idm-integration-module/ngpampappnmepgilojfohadhhmbh ...

  4. Python数据分析几个比较常用的方法

    1,表头或是excel的索引如果是中文的话,输出会出错 ​​解决方法:python的版本问题!换成python3就自动解决了!当然也有其他的方法,这里就不再深究 2,如果有很多列,如何输出指定的列? ...

  5. Linux进程管理工具

    Linux进程管理工具 Htop yum install htop 参考帮助: http://blog.csdn.net/skh2015java/article/details/53173896 Li ...

  6. python练习册0006

    第 0006 题:你有一个目录,放了你一个月的日记,都是 txt,为了避免分词的问题,假设内容都是英文,请统计出你认为每篇日记最重要的词. import re import os def get_li ...

  7. 迅速上手:使用taro构建微信小程序基础教程

    前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

  8. ORA-01536: 超出表空间 'tablespace_name' 的空间限额

    表空间限额问题知识总结:    表空间的大小与用户的配额大小是两种不同的概念    表空间的大小是指实际的用户表空间的大小,而配额大小指的是用户指定使用表空间的的大小    把表空间文件增大,还是出现 ...

  9. webpack学习笔记--配置resolve

    Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件. Webpack 内置 JavaScript 模块化语 ...

  10. jQuery中live函数的替代-【jQuery】

    在老版本的jQuery中,当需要对页面上某个由ajax加载的某片段的页面内容响应事件时,可以使用live函数来响应其事件,比如: $('a').live('click', function() { b ...