首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 19, 2019

本文实例讲述了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>

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

二、数据传递

组件数据传递:    √

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组件数据传递、父子组件数据获取，slot,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组件数据传递、父子组件数据获取，slot,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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
checkbox使用示例
Aug 23 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
Vue中props的详解
May 16 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JS实现纵向轮播图（初级版）
Jan 18 Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
vue组件定义，全局、局部组件，配合模板及动态组件功能示例
Mar 19 #Javascript
express.js中间件说明详解
Mar 19 #Javascript
js array数组对象操作方法汇总
Mar 18 #Javascript
浅析JavaScript异步代码优化
Mar 18 #Javascript
js实现图片局部放大效果详解
Mar 18 #Javascript
SandBox(1) callback(1) swing(1) OpenFeign(1) RTX 3050 ti(1) 热力图(1) Git(3) cudnn(1) webpack(1) cudn(1)
You might like
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript sub方法入门实例（把字符串显示为下标）
2014/10/17 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
史上最为详细的javascript继承（推荐）
2019/05/18 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python pdb调试方法分享
2014/01/21 Python
python3.7.0的安装步骤
2018/08/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
澳大利亚最受欢迎的超级商场每日优惠：Catch
2020/11/17 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
欧元符号 €
2022/02/17 杂记