首页
所有分类
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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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
扫雷(1) Scheduled(1) 模拟登录(1) 路由(1) 双向链表(6) NumPy(2) 区块链(2) router(1) 单向链表(1) Date(1)
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
基于jQuery的弹出警告对话框美化插件(警告，确认和提示)
2010/06/10 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python根据成绩分析系统浅析
2019/02/11 Python
如何解决安装python3.6.1失败
2020/07/01 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Shopee新加坡：东南亚与台湾电商平台
2019/01/25 全球购物
土木工程专业自荐信
2013/10/04 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
调研汇报材料范文
2014/08/17 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript