详解vue.js数据传递以及数据分发slot


Posted in Javascript onJanuary 20, 2018

一、组件间的数据传递

1.父组件获取子组件的数据

*子组件把自己的数据,发送到父级

*vm.$emit(事件名,数据);

*v-on: @

示例用法:当点击send按钮的时候,“111”变成“我是子组件的数据”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级获取子级的数据</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<div>
  <aaa>
  </aaa>
</div>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法,@child-msg和下面的this.$emit('child-msg',this.a)相对应
  <bbb @child-msg="get"></bbb>
</template>
<template>
  <h3>子组件-</h3>
  <input type="button" value="send" @click="send">
</template>
<script>
  var vm=new Vue({
    el:'#box',
    data:{
      a:'aaa'
    },
    components:{
      'aaa':{
        data:function(){
          return {
            msg:111,
            msg2:'我是父组件的数据'
          }
        },
        template:'#aaa',
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          'bbb':{
            data:function(){
              return {
                a:'我是子组件的数据'
              }
            },
            template:'#bbb',
            methods:{
              send:function(){
                this.$emit('child-msg',this.a);
              }
            }
          }
        }
      }
    }
  });
</script>
</body>
</html>

2、子组件获取父组件的数据

在调用子组件:

<bbb :m="数据"></bbb>

子组件之内:

props:['m','myMsg']
props:{
'm':String,
'myMsg':Number



}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自己获取父级的数据</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<div>
  <div>{{a}}</div>
  <aaa>
    {{msg}}
  </aaa>
</div>

<template>
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
  var vm=new Vue({
    el:'#box',
    data:{
      a:'a'
    },
    components:{
      'aaa':{
        data:function(){
          return {
            msg:111,
            msg2:'我是父组件的数据'
          }
        },
        template:'#aa',
        components:{
          'bbb':{
            props:{
              'mmm':String,
              'myMsg':Number
            },
            template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
          }
        }
      }
    }
  });

</script>
</body>
</html>

运行结果:

详解vue.js数据传递以及数据分发slot

二、内容分发:

Vue.js提供了一种混合父组件内容与子组件自己模版的方式:slot,用来占一个位置

1、基本用法 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot保留原来的位置</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>

</head>
<body>
<div>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  <hr>
  <aaa>
  </aaa>
</div>
<template>
  <h1>xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>

<script>
  var vm=new Vue({
    el:'#box',
    data:{
      a:'aaa'
    },
    components:{
      'aaa':{
        template:'#aaa'
      }
    }
  });

</script>
</body>
</html>

运行结果:ul标签里面的内容没有被覆盖,如果不使用slot,ul标签里的内容将会被覆盖

详解vue.js数据传递以及数据分发slot

2、slot的name属性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot中name属性的使用</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<div>
  <aaa>
    <ul slot="ul-slot">
//这里slot的名字要与下面slot中name属性相对应
      <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>

  <h1>xxxx</h1>
  <slot name="ol-slot">这是默认的情况</slot>


//设置name属性,给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.js数据传递以及数据分发slot

Javascript 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
Angular2整合其他插件的方法
Jan 20 #Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 #Javascript
javascript数组拍平方法总结
Jan 20 #Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
详解JS面向对象编程
2016/01/24 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python set常用操作函数集锦
2017/11/15 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python 实现控制鼠标键盘
2020/11/27 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
关于雷锋的演讲稿
2014/05/10 职场文书
主持人演讲稿
2014/05/13 职场文书
平安建设工作方案
2014/06/02 职场文书
师范生求职信
2014/06/14 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
导师鉴定意见
2015/06/05 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS