详解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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
教你使用vscode 搭建react-native开发环境
Jul 07 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
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Python性能优化技巧
2015/03/09 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
个人简历自我鉴定
2013/10/11 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
电力培训心得体会
2014/09/02 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2014年保密工作总结
2014/11/22 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
MySQL 查询速度慢的原因
2021/05/25 MySQL
Python安装使用Scrapy框架
2022/04/12 Python
MySQL 计算连续登录天数
2022/05/11 MySQL