vue.js之数据传递和数据分发slot
一、组件间的数据传递
1.父组件获取子组件的数据
*子组件把自己的数据，发送到父级
*vm.$emit(事件名,数据);
*v-on: @
示例用法：当点击send按钮的时候，“111”变成“我是子组件的数据”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级获取子级的数据</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div> <template id="aaa">
<span>我是父级 -> {{msg}}</span>
//自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data:function(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
//这里的msg实际上就是子组件传递给父组件的数据
get:function(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data:function(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send:function(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
</html>
2、子组件获取父组件的数据
在调用子组件：
<bbb :m="数据"></bbb>
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自己获取父级的数据</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<div>{{a}}</div>
<aaa>
{{msg}}
</aaa>
</div> <template id="aa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'a'
},
components:{
'aaa':{
data:function(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aa',
components:{
'bbb':{
props:{
'mmm':String,
'myMsg':Number
},
template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
}
}
}
}
}); </script>
</body>
</html>
运行结果：
二、内容分发：
Vue.js提供了一种混合父组件内容与子组件自己模版的方式:slot，用来占一个位置
1、基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot保留原来的位置</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style> </head>
<body>
<div id="box">
<aaa>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot>这是默认的情况</slot>
<p>welcome vue</p>
</template> <script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
}); </script>
</body>
</html>
运行结果：ul标签里面的内容没有被覆盖，如果不使用slot,ul标签里的内容将会被覆盖
2、slot的name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot中name属性的使用</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
<ul slot="ul-slot"> //这里slot的名字要与下面slot中name属性相对应
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot"> //用法同上
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot name="ol-slot">这是默认的情况</slot> //设置name属性，给slot命名
<p>welcome vue</p>
<slot name="ul-slot">这是默认的情况2</slot>
</template> <script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
}); </script>
</body>
</html>
运行结果：
vue.js之数据传递和数据分发slot的更多相关文章
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子，儿子更改数据后，重新发送给父亲，父亲数据更改后，属性会重新发送个儿子，儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- 简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页
一.先在数据库中创建表格 在mysql中建users库并建立一个含有ID,username,email三个字段的user表 二.去vue的组件里面写页面的表单代码,注意form标签里的action需要 ...
- vue.js遍历ajax请求的数据
<div id="dv" style="text-align: center;"><div class="head input-gr ...
- vue.js 父子组件间 props 数据同步处理
常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...
- 在vue.js中使用echarts，数据动态刷新
在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲 ...
- vue组件父子组件传递引用类型数据
今天在写分页功能时,发现父子组件传值时,子组件监听不到父组件中数据的变化,传递的是一个引用类型的数据 其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听不到变化,此时就需要做一个 ...
- Vue.js线程机制问题还是数据双向绑定有延迟的问题
最近用select2做一个下拉多选,若只是从后端获取一个列表渲染还好说,没有任何问题.但要用select2对数据初始化时进行selected的默认选项进行显示,就出现问题了. vm.$set('are ...
- vue.js中路由传递参数
知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...
随机推荐
- Epplus：导出Excel
看到其它大神的Epplus导出Excel,结合写出符合自己需求的将导出数据到Excel,给其它人参考一下,也可以学习http://www.cnblogs.com/caofangsheng/p/6149 ...
- mybatis框架(5)---动态sql
那么,问题来了: 什么是动态SQL? 动态SQL有什么作用? 传统的使用JDBC的方法,相信大家在组合复杂的的SQL语句的时候,需要去拼接,稍不注意哪怕少了个空格,都会导致错误.Mybatis的动态S ...
- 插入光盘，创建挂载点，挂载设备，安装rpm包，升级rpm包，卸载rpm包，查询rpm包是否安装，查询rpm包信息、安装位置，查询系统文件名属于哪个安装包
插入光盘: 创建挂载点: 创建挂载点. 挂载设备:或者mount /dev/sr0 /mnt/cdrom 安装rpm包: [root@localhost Packages]# rpm -ivh mys ...
- Python网络爬虫与信息提取（三）—— Re模块
regular expression / regex / RE 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配.Python 自1.5版本起增加了re 模块,它提供 ...
- C++ 头文件系列(iostream)
1. 简介 这个头文件非常特殊,它只声明了8个常用流对象. 2. 8个对象 2.1 窄字符对象(char) extern istream cin extern ostream cout extern ...
- [置顶]
Xamarin android如何调用百度地图入门示例（一）
在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...
- 用Go校验下载文件之SHA256
用GO校验下载文件之SHA256 原来对计算机和网络使用安全这块不够重视,用了N多年盗版的操作系统和办公软件,为了破解使用过各种激活软件,也安装使用过很多别人破解过的软件:网络下载的文件从不校验.慢慢 ...
- Linux发行版 CentOS6.5下删除分区操作
本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 有时候,发现分区分错了.需要删除分区,只需按照分区的步骤逆向操作 ...
- MobaXterm
MobaXterm又名MobaXVT,是一款增强型终端.X服务器和Unix命令集(GNU/ Cygwin)封装在一个单一的便携式exe文件.MobaXterm可以开启多个终端视窗,以最新的X服务器为基 ...
- flask 部署后并发测试
部署后看下flask支持的并发,来个300并发看看,上代码 import threading, time, requests url = "http://www.baidu.com" ...