Vue2.0 slot分发内容与props验证的方法


Posted in Javascript onDecember 12, 2017

使用一种方式混合父组件的内容与子组件自己的模板,这个过程被称为“内容分发”。在子组件中使用特殊的<slot>元素作为内容的插槽。

Slot分发内容

概述:

简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。

默认情况下

父组件在子组件内套的内容,是不显示的。

例如代码:

<div id="app"> 
  <children> 
    <span>12345</span> 
    <!--上面这行不会显示--> 
  </children> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      children: {  //这个无返回值,不会继续派发 
        template: "<button>为了明确作用范围,所以使用button标签</button>" 
      } 
    } 
  }); 
</script>

显示内容是一个button按钮,不包含span标签里面的内容;

一、单个slot

在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。

子组件模板中没有slot标签,父组件提供的内容会被抛弃

如果替换的内容较多,可以直接用一个template替换。

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- 当卸载自定义标签之前的内容,要混合子组件中的模板 -->
   <div>我是父组件提供的内容,我的存在会替换子组件中slot标签内的内容</div> 
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot>
     <div>我备用内容,如果子组件中有内容会替换我哦~</div>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

见证奇迹的时候到了,页面上会显示如下内容

Vue2.0 slot分发内容与props验证的方法 

单个slot.png

二、有具体名称的slot

<slot>元素可以用一个特殊的属性name来配置如何分发内容。

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- <div slot="one">我替换one</div> -->
   <div slot="three">我替换three</div>
   <div slot="two">我替换two</div>
   <span slot="two">我替换two</span>
   <div slot="one">我替换one</div>
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

你猜页面上会显示什么?猜对了我就告诉你-。-

Vue2.0 slot分发内容与props验证的方法 

具名slot.png

是不是被顺序惊到了,这是因为页面会根据子组件中slot的顺序去替换内容并渲染页面。

可以使用一个匿名的slot,处理那些没有对应slot的内容

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- <div slot="one">我替换one</div> -->
   <div slot="three">我替换three</div>
   <div slot="two">我替换two</div>
   <span slot="two">我替换two</span>
   <div slot="one">我替换one</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
  </custom>
 </div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
    <slot>
     <p>我是无名的slot</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

匿名的slot就会被那些没有对应slot的内容替换。

Vue2.0 slot分发内容与props验证的方法 

匿名slot.png

三、编译作用域

父组件模板的内容在父组件作用域内编译

子组件模板的内容在子组件作用域内编译

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- 渲染的数据,是父组件中的数据,如果想使用子组件中的数据,就在子组件中建立自己的数据 -->
   {{message}}
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  data(){
   return {
    message:"我是子组件的数据"
   }
  },
  template:`
   <div>
    <p>我是{{message}}</p>
    <slot>
    // 这的内容会被父组件中内容替换
     <p> {{message}}</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app",
  data:{
   message:"我是父组件的数据"
  }
 })
</script>

页面渲染

Vue2.0 slot分发内容与props验证的方法 

编译作用域.png

运用了slot分发,使我们对组件的应用更加灵活。

单向数据流

数据从父组件传递给子组件,只能单项绑定。

在子组件内不应该修改父组件传递过来的数据。

改变prop的情况:

1.作为data中局部数据的初始值使用

2.作为子组件中computed属性

props 验证

我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确

props:{
  propA:Number, 数值类型
  propB:[String,Number], 多种类型
  propC:{type:String,required:true}, 必填项
  propD:{type:Number,default:100}, 默认是
  propE:{typr:Number,default:function(){return 1000}}
  propF:{validator:function(value){return value>2}} 符合value>2的值
  }

不明白,看如下案例,要求父组件给子组件传值得时候

1、这个参数是必须传的

2、值必须是数值类型的

3、默认参数是10

Vue.component('custom-cmpontent',{
  data(){
   return {
    incrementCount:this.count //作为局部组件的data的初始值
   }
  },
  props:{
   count:{
    type:Number, // 类型
    default:10, // 默认值
    required:true //必须要传参数
   }
  },
  computed:{
   incrementCount2(){
    return this.incrementCount
   }
  },
  template:`
    <div>
     <h2>我是一个自定义组件</h2>
     <input type='button' value="改变count的值" @click="changeCount">
     {{incrementCount}}
    </div>
  `,
  methods:{
   changeCount:function(value){
    this.incrementCount++;
    this.$emit('receive')
   }
  }
 })
 new Vue({
  el:"#app",
  data:{
   count:0
  },
  methods:{
   countH:function(){
    this.count++;
   }
  }
 })

那如果我们给子组件传值得时候,传过去的是一个字符串,就会报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
koa源码中promise的解读
Nov 13 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
分析JS中this引发的bug
Dec 12 #Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 #Javascript
基于input动态模糊查询的实现方法
Dec 12 #Javascript
详解vue.js之props传递参数
Dec 12 #Javascript
react实现菜单权限控制的方法
Dec 11 #Javascript
Angular 作用域scope的具体使用
Dec 11 #Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php筛选不存在的图片资源
2015/04/28 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
python字符串,数值计算
2016/10/05 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
市场部管理制度
2014/02/02 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
小学见习报告
2015/06/23 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
Python四款GUI图形界面库介绍
2022/06/05 Python