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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python3.2中Print函数用法实例详解
2015/05/19 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
python statsmodel的使用
2020/12/21 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
小学校本培训方案
2014/06/06 职场文书
2014年统战工作总结
2014/12/09 职场文书
写给医生的感谢信
2015/01/22 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python