首页
所有分类
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 prototype属性使用说明
May 13 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
javascript每日必学之继承
Feb 23 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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
SOA面试题(9) J2EE面试题(19) Ruby面试题(15) MySQL面试题(19) Javascript面试题(44) UNIX面试题(27) Delphi面试题(13) PYTHON面试题(27) EJB面试题(46) Servlet面试题(20)
You might like
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
详解服务端预渲染之Nuxt（介绍篇）
2019/04/07 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
英国第一豪华护肤品牌：Elemis
2017/10/12 全球购物
德国高尔夫商店：Golfshop.de
2019/06/22 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
男女朋友协议书
2014/04/23 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
婚礼答谢礼品
2015/01/20 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技