详解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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
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程序员的13个好习惯小结
2012/02/20 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Tornado 多进程实现分析详解
2018/01/12 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
企业法人授权委托书
2014/04/03 职场文书
软件项目实施计划书
2014/05/02 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
ES6 解构赋值的原理及运用
2021/05/25 Javascript
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS