Vue2.0 slot分发内容与props验证的方法
|
使用一种方式混合父组件的内容与子组件自己的模板，这个过程被称为“内容分发”。在子组件中使用特殊的 Slot分发内容概述：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。 默认情况下父组件在子组件内套的内容，是不显示的。 例如代码：
12345
显示内容是一个button按钮，不包含span标签里面的内容； 一、单个slot在子组件模板中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用。如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。 子组件模板中没有slot标签，父组件提供的内容会被抛弃 如果替换的内容较多，可以直接用一个template替换。 自定义组件
我是父组件提供的内容，我的存在会替换子组件中slot标签内的内容
见证奇迹的时候到了，页面上会显示如下内容
二、有具体名称的slot自定义组件
你猜页面上会显示什么？猜对了我就告诉你-。-
是不是被顺序惊到了，这是因为页面会根据子组件中slot的顺序去替换内容并渲染页面。 可以使用一个匿名的slot，处理那些没有对应slot的内容 自定义组件
替换无名的slot
替换无名的slot
替换无名的slot
匿名的slot就会被那些没有对应slot的内容替换。
三、编译作用域父组件模板的内容在父组件作用域内编译 子组件模板的内容在子组件作用域内编译 自定义组件
页面渲染
运用了slot分发，使我们对组件的应用更加灵活。 单向数据流数据从父组件传递给子组件，只能单项绑定。 在子组件内不应该修改父组件传递过来的数据。 改变prop的情况： 1.作为data中局部数据的初始值使用 2.作为子组件中computed属性 props 验证我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确 2}} 符合value>2的值
}
不明白，看如下案例，要求父组件给子组件传值得时候 1、这个参数是必须传的 2、值必须是数值类型的 3、默认参数是10 我是一个自定义组件`,methods:{ changeCount:function(value){ this.incrementCount++; this.$emit('receive') } } }) new Vue({ el:"#app",data:{ count:0 },methods:{ countH:function(){ this.count++; } } })那如果我们给子组件传值得时候，传过去的是一个字符串，就会报错 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
