首页 > web前端 > js教程 > 在vue.js中如何实现数据分发slot

在vue.js中如何实现数据分发slot

亚连
发布: 2018-06-11 14:12:21
原创
1694 人浏览过

本篇文章给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识,有这方面兴趣的朋友参考下吧。

一、组件间的数据传递

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>
<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法,@child-msg和下面的this.$emit(&#39;child-msg&#39;,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:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aaa&#39;,
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          &#39;bbb&#39;:{
            data:function(){
              return {
                a:&#39;我是子组件的数据&#39;
              }
            },
            template:&#39;#bbb&#39;,
            methods:{
              send:function(){
                this.$emit(&#39;child-msg&#39;,this.a);
              }
            }
          }
        }
      }
    }
  });
</script>
</body>
</html>
登录后复制

2、子组件获取父组件的数据

在调用子组件:

子组件之内:

props:[&#39;m&#39;,&#39;myMsg&#39;]
props:{
&#39;m&#39;:String,
&#39;myMsg&#39;: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>
<p>
  <p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>
</p>

<template>
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;a&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aa&#39;,
        components:{
          &#39;bbb&#39;:{
            props:{
              &#39;mmm&#39;:String,
              &#39;myMsg&#39;:Number
            },
            template:&#39;<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>&#39;
          }
        }
      }
    }
  });

</script>
</body>
</html>
登录后复制

运行结果:

二、内容分发:

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>
<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  <hr>
  <aaa>
  </aaa>
</p>
<template>
  <h1>xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>

<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>
</body>
</html>
登录后复制

运行结果:ul标签里面的内容没有被覆盖,如果不使用slot,ul标签里的内容将会被覆盖

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>
<p>
  <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>
</p>
<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:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>
</body>
</html>
登录后复制

 运行结果:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

实现输入框与下拉框联动

在JS中实现点击下拉菜单内容同步输入框

在vue中使用cli如何实现重构多页面脚手架

在JS中如何实现通过拖拽改变物体大小

在Vue中使用cli+mui有关区域滚动问题

在vue中在线付费课程(详细教程)

express与koa的使用对比(详细教程)

以上是在vue.js中如何实现数据分发slot的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板