详解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 相关文章推荐
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JS中Location使用详解
May 12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JS中的phototype详解
2017/02/04 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
北大青鸟学生求职信
2013/09/24 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
展会邀请函范文
2014/01/26 职场文书
公司投资建议书
2014/05/16 职场文书
办公经费申请报告
2015/05/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python