首页
所有分类
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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
javascript实现2048游戏示例
May 04 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
destoon(1) nginx(76) 伪静态(1) 组策略(1)  AD域(1) Windows server 2012(17) 日志格式分析(1) 子查询(1) Centos(8) Rewrite(4)
You might like
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php经典算法集锦
2015/11/14 PHP
php 常用的系统函数
2017/02/07 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
2010/03/16 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
使用NodeJs 开发微信公众号（三)微信事件交互实例
2016/03/02 NodeJs
jquery获取复选框的值的简单实例
2016/05/26 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python读写文件操作示例程序
2013/12/02 Python
python3编码问题汇总
2016/09/06 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
大四毕业生学习总结的自我评价
2013/10/31 职场文书
生产部经理岗位职责
2013/12/16 职场文书
导师推荐信范文
2014/05/09 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电