vue组件数据传递、父子组件数据获取、插槽、路由器路由功能示例

时间：2021-08-26 来源：互联网编辑：宝哥软件园浏览：次

本文实例讲述了某视频剪辑软件组件数据传递、父子组件数据获取、插槽、路由器路由功能。分享给大家供大家参考，具体如下：

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。布斯。com/Vue/2。4 .4/Vue。量滴js '/脚本样式/style/head dy div id=' box ' AAA/AAA/div脚本var VM=new Vue({ El : ' # box '，data: { a: ' aaa ' }，components:我是父组件的数据} }，template:'h2我是美国汽车协会组件/h2bbb/bbb '，组件： { ' BBB ' : {模板： ' H3我是血脑屏障组件-{{msg}}/h3'//这里是子组件，是访问不到父组件的数据msg } } })；/脚本/正文/html

二、数据传递

组件数据传递：

1.子组件获取父组件数据

在调用子组件：

bbb :m='数据/bbb子组件之内：

prop :[' m '，' MyMSg ']prop : { ' m ' : string，' myMsg':Number}2 .父级获取子级数据

*子组件把自己的数据，发送到父级虚拟机$emit(事件名，数据); @

1、子组件获取父组件数据

方法一：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。bootsss。com/Vue/2。4 .4/Vue。量滴js '/脚本样式/样式/头dy div id=' box ' AAA/AAA/div模板id=' AAA ' h 111111/h1 BBB :mm=' msg 2 ' : my-msg='我是父组件的数据} }，template:'#aaa '，组件3360 { ' BBB ' : { prop s 3360[' mmm '，' myMsg']，//my-msg在这里要变成驼峰命名法模板：'h3我是血脑屏障组件-{ { mmm } } br { { myMsg } }/H3 ' } } })；/脚本/正文/html方法二：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。bootsss。com/Vue/2。4 .4/Vue。量滴js '/脚本样式/样式/头dy div id=' box ' AAA/AAA/div模板id=' AAA ' h 111111/h1 BBB :mm=' msg 2 ' : my-msg='我是父组件的数据} }，template:'#aaa '，组件： { ' BBB ' : { prop 3360 { ' m ' : string，//注明数据类型myMsg':Number }，template:'h3我是血脑屏障组件-{ { mmm } } br { { myMsg } }/H3 ' } } })；/script/body/html2、父级获取子级数据

方法一：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。bootsss。com/vue/2。4 .4/vue。量滴js '/脚本样式/样式/head dy div id=' box ' AAA/AAA/div模板id='aaa' span我是父级-{ { msg } }/span BBB @ child-msg=' get '/BBB/模板模板id='bbb' h3子组件-/h3输入类型='按钮'值=“发送”@单击=“发送”/模板脚本var VM=new Vue({ El : ' # box }，data:{ a:'aaa' }，components 3360 { ' AAA ' : { data(){ return { msg : '我是父组件的数据} }，template:'#aaa '，方法： { get(msg){//alert(msg)；this.msg=msg} }，组件： { ' BBB ' : { data(){ return { a : '我是子组件的数据} }，template:'#bbb '，methods:{ send(){ this .$emit('child-msg '，这。a)；} } } } } } });/脚本/正文/html注意：

vm.dispatch(事件名，数据)子级向父级发送数据vm.dispatch(事件名，数据)子级向父级发送数据vm.broadcast(事件名，数据)父级向子级广播数据配合：事件：{}在vue2.0里面已经，报废了槽：位置、槽口

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

类似尼日利亚里面transclude(指令)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。布斯。com/vue/2。4 .4/vue。量滴js '/脚本样式/样式/头dy div id=' box ' AAA ul插槽=' ul-slot ' Li 1111/李丽丽2222/Li Li 3333/Li/ul ol插槽=' ol-slot ' Li 111这是默认的情况/slot pwelcome vue/p插槽名称='ul-slot '这是默认的情况2/插槽/模板脚本var VM=new Vue({ El : ' # box '，data:{ a:'aaa' }，components 3360 { ' AAA ' : { template : ' # AAA ' } } })；/脚本/正文/html效果图：

vue- SPA应用，单页面应用某视频剪辑软件路由器路由

虚拟资源交互某视频剪辑软件路由器路由路由：根据不同全球资源定位器(统一资源定位符)地址，出现不同效果该课程配套用0.7.13版本某视频剪辑软件路由器主页家新闻页新闻

html:

a v-link='{path:'/home'} '主页/a跳转链接展示内容：路由器视图/路由器视图：

//1.准备一个根组件var App=Vue。extend()；//2.国内新闻组件都准备var Home=Vue。扩展({模板： ' H3我是主页/H3 ' })；var News=Vue。扩展({模板： ' H3我是新闻/H3 ' })；//3.准备路由var router=new VueRouter()；//4.关联路由器。map({ ' home ' : { component : home }，' news ' : { component : news } })；//5.启动路由router.start(App，' # box ')；跳转：

路由器。重定向({ '/' : '/home ' })；下载vue-router:

某视频剪辑软件路由器路由：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。布斯。com/vue/2。4 .4/vue。量滴js '/script script src=' http : bower _ components/vue-router/dist/vue-router。js '/脚本样式/样式/头dy div id=' box ' ul阿利v-link=' {路径33333主页/a /li阿利v-link='{path:'/news'} '新闻/a /li /ul分区路由器-视图/路由器-视图/div /div脚本//1。准备一个根组件var App=Vue。extend()；//2.国内新闻组件都准备var Home=Vue。扩展({模板： ' H3我是主页/H3 ' })；var News=Vue。扩展({模板： ' H3我是新闻/H3 ' })；//3.准备路由var router=new VueRouter()；//4.关联路由器。map({ ' home ' : { component : home }，' news ' : { component : news } })；//5.启动路由router.start(App，' # box ')；/脚本/正文/html跳转：

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

vue组件数据传递、父子组件数据获取、插槽、路由器路由功能示例

新天龙八部

热门手游排行榜