详解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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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安全的URL字符串base64编码和解码
2014/06/19 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python django集成cas验证系统
2014/07/14 Python
利用Python获取操作系统信息实例
2016/09/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
上班迟到检讨书
2014/01/10 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
班训口号大全
2014/06/18 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
大学生实习介绍信
2015/05/05 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python