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

2020-11-27 来源：爱go旅游网

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程序设计有所帮助。

显示全文

全部栏目

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