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 ...
随机推荐
- Eclipse上Maven环境配置使用 (全)
Eclipse上Maven环境配置使用 (全) 1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. ...
- iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备
安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...
- 【java】Vector
package com.tn.collect; import java.util.Enumeration; import java.util.Iterator; import java.util.Ve ...
- IOS学习3——代理
本文转载自:你真的了解iOS代理设计模式吗? 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递一些参数.这篇文章会涵盖代理的使用技巧和原理,以及代理的内存 ...
- iOS 单利模式实现/优缺点
感谢此文章提供摘要: http://www.cnblogs.com/lyanet/archive/2013/01/11/2856468.html 优缺点:http://blog.csdn.net/ta ...
- BZOJ1036 (其实这只是一份板子)
我说我是不是完蛋了啊... ...昨天考试线段树写错,调了好久才调回来:今天做这道树链剖分辣鸡操作题,TM写错了4个地方!先是建树为了省常数打了一个build结果初值赋错了,然后又是线段树!getma ...
- bzoj 2298: [HAOI2011]problem a
Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n ...
- Linux(CentOS6.5)下编译安装Nginx官方最新稳定版(nginx-1.10.0)
注:此文已经更新为新版:http://comexchan.cnblogs.com/p/5815753.html ,请直接查看新版,谢谢! 本文地址http://comexchan.cnblogs.co ...
- Java 字符编码与解码
1.字符编码的发展历程 ①.ASCII 码 因为计算机只认识数字,所以我们在计算机里面的一切数据都是以数字来表示,因为英文字符有限,所以规定使用的字节的最高位是 0,每一个字节都是以 0-127 之间 ...
- 一起学Linux01之环境安装
先说说为什么在公司里服务器用Linux系统而非Windows系统.其实吧,我感觉主要就是前者更靠谱,一个字就是稳!不说别的,就我现在写博客用的电脑没事给我黑个屏,断个网啥的.而且总有漏洞,保不齐就被黑 ...