详解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 json 新手入门文档
Dec 03 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
vue.js实现简单的计算器功能
Feb 22 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python tkinter模版代码实例
2020/02/05 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
保密承诺书范文
2014/03/27 职场文书
主题实践活动总结
2014/05/08 职场文书
动物科学专业求职信
2014/07/27 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技