vue组件数据传递、父子组件数据获取，slot,router路由功能示例

时间：2021-05-26

本文实例讲述了vue组件数据传递、父子组件数据获取，slot,router路由功能。分享给大家供大家参考，具体如下：

一、vue默认情况下，子组件也没法访问父组件数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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.dispatch(事件名,数据)子级向父级发送数据vm.broadcast(事件名,数据)父级向子级广播数据
  • 配合: event:{}
  • 在vue2.0里面已经，报废了

slot:位置、槽口

作用: 占个位置，不覆盖原先的内容

类似ng里面 transclude （指令）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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-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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章