vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递
一、vue默认情况下，子组件也没法访问父组件数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div> <script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件->{{msg}}</h3>'//这里是子组件，是访问不到父组件的数据msg
}
}
}
}
}); </script>
</body>
</html>
二、数据传递
组件数据传递: √
1. 子组件获取父组件data
在调用子组件：
<bbb :m="数据"></bbb> 子组件之内:
props:['m','myMsg'] props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据，发送到父级 vm.$emit(事件名,数据); v-on: @
1、子组件获取父组件data
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:['mmm','myMsg'],//my-msg在这里要变成驼峰命名法
template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
}
}
}
}
});
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:{
'm':String,//注明数据类型
'myMsg':Number
},
template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
}
}
}
}
});
</script>
</body>
</html>
2、 父级获取子级数据
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
<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(){
return {
msg:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
</html>
注意：
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了
slot:位置、槽口
作用: 占个位置，不覆盖原先的内容
类似ng里面 transclude （指令）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
<ul slot="ul-slot">
<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>
<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-> SPA应用，单页面应用 vue-router路由
vue-> SPA应用，单页面应用 vue-router路由
vue-resouce 交互
vue-router 路由 路由：根据不同url地址，出现不同效果 该课程配套用 0.7.13版本 vue-router 主页 home
新闻页 news html:
<a v-link="{path:'/home'}">主页</a> 跳转链接 展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件
var App=Vue.extend(); //2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
}); var News=Vue.extend({
template:'<h3>我是新闻</h3>'
}); //3. 准备路由
var router=new VueRouter(); //4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
}); //5. 启动路由
router.start(App,'#box'); 跳转:
router.redirect({
‘/’:'/home'
});
下载vue-router:
vue-router路由:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div> <script>
//1. 准备一个根组件
var App=Vue.extend(); //2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
}); var News=Vue.extend({
template:'<h3>我是新闻</h3>'
}); //3. 准备路由
var router=new VueRouter(); //4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
}); //5. 启动路由
router.start(App,'#box');
</script>
</body>
</html>
跳转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div> <script>
//1. 准备一个根组件
var App=Vue.extend(); //2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
}); var News=Vue.extend({
template:'<h3>我是新闻</h3>'
}); //3. 准备路由
var router=new VueRouter(); //4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
}); //5. 启动路由
router.start(App,'#box'); //6. 跳转
router.redirect({
'/':'home' //访问根目录时，跳转到/home
});
</script>
</body>
</html>
vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由的更多相关文章
- Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...
- vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'
vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...
- vue教程1-02 data里面存储数据
vue教程1-02 data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
随机推荐
- best-case analysis in real-time system
ECRTS: Exact Best-Case Response Time Analysis of Fixed Priority Scheduled Tasks motivation Real-time ...
- openstack的网络、子网、端口的关系
network network 是一个隔离的二层广播域.Neutron 支持多种类型的 network,包括 local, flat, VLAN, VxLAN 和 GRE. locallocal 网络 ...
- MFC事件和线程
HANDLE WINAPI CreateThread ( __in_opt LPSECURITY_ATTRIBUTES lpThreadAttributes, // 指向SECURITY_ATTRIB ...
- mmm和mmma的区别
m:编译整个安卓系统 makes from the top of the tree mm:编译当前目录下的模块,当前目录下需要有Android.mk这个makefile文件,否则就往上找最近的Andr ...
- Properties类、序列化流与反序列化流、打印流、commons-IO
Properties类 特点: 1.Hashtable的子类,map集合中的方法都可以用: 2.该集合没有泛型,键值都是字符串: 3.是一个可以持久化的属性集,键值可以存到集合中,也可存到持久化的设备 ...
- Android listview 侧滑 SwipeListView 详解 实现微信，QQ等滑动删除效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/28508769 今天看别人项目,看到别人使用了SwipeListView,Goog ...
- .net正则表达式实例
正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET的System.dll类库提供的System.Text.RegularExpression ...
- Max Sum—hdu1003（简单DP） 标签： dp 2016-05-05 20:51 92人阅读 评论(0)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- set_error_handler
set_error_handler这个函数的作用是为了防止错误路径泄露 何为错误路径泄露呢? 我们写程序,难免会有问题,而PHP遇到错误时,就会给出出错脚本的位置.行数和原因 有很多人说,这并没有什么 ...
- libtool 创建库的工具
libtool 创建库的工具 1. 背景 在不同的系统中建立动态链接库的方法有很大的差别,这主要是因为每个系统对动态链接库的用法和实现并不相同,以及编译器对动态链接库支持的选项也不太一样. 对于开发人 ...