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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
js密码强度校验
Nov 10 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
js实现随机点名程序
Sep 17 Javascript
分析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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
tensorflow更改变量的值实例
2018/07/30 Python
pandas数据集的端到端处理
2019/02/18 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
原生python实现knn分类算法
2019/10/24 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
Shell编程面试题
2016/05/29 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
车辆转让协议书
2014/04/15 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书