详解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中的107个基础知识收集整理 推荐
Mar 29 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jquery的live使用注意事项
Feb 18 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
js实现右键菜单功能
Nov 28 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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 读取Postgresql中的数组
2013/04/14 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python 读取位于包中的数据文件
2020/08/07 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
高一化学教学反思
2014/02/05 职场文书
员工考核评语大全
2014/04/26 职场文书
社区活动总结报告
2014/05/05 职场文书
网络研修随笔感言
2015/11/18 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python