qq刷赞网站怎么做,做的网站提示不安全,有哪些网站做的很有特色,响应式网页设计图片组件的插槽
组件本身就是一个容器#xff0c;也可以是一个vue对象#xff0c;也是一个虚拟DOM
普通插槽
组件本身是一个容器#xff0c;这个容器本身是空的#xff0c;当我们把需要封装的html结构装进去之后#xff0c;我们可以认为这个容器被塞满了#xff0c;那就意…组件的插槽
组件本身就是一个容器也可以是一个vue对象也是一个虚拟DOM
普通插槽
组件本身是一个容器这个容器本身是空的当我们把需要封装的html结构装进去之后我们可以认为这个容器被塞满了那就意味着我们无法想组件内部添加新的html结构进去但是我们想在每次调用组件的时候需要渲染一些个性化的东西这个时候我们就需要给组件做一个预留空间这个预留空间就是插槽
bodydiv idapponep我是子标题/p/one/divtemplate idtemp1divh2我是标题/h2/div/template
/body
script srcjs/vue.js/script
scriptlet one {template:#temp1}new Vue({el:#app,components:{one}})
/script代码分析 以上的代码渲染之后我们在虚拟DOM中写入了一个p标签着就是所谓的插入但是并没有效果因为我们并没有在one组件中预留空间也就是插槽 如果想在组件内部预留插槽使用 slot/slot bodydiv idapponep我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/p/one/divtemplate idtemp1divh2我是标题/h2slot!-- 组件内预留给插槽的空间 --/slot/div/template
/body
script srcjs/vue.js/script
scriptlet one {template:#temp1}new Vue({el:#app,components:{one}})
/script一个插入点插入多个插槽
现在我们想让刚才的代码中前3个p标签出现在标题的上方后面3个出现在标题的下方
bodydiv idapponep我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/pp我是子标题/p/one/divtemplate idtemp1divslot/sloth2我是标题/h2slot/slot/div/template
/body
script srcjs/vue.js/script
scriptlet one {template:#temp1}new Vue({el:#app,components:{one}})
/script代码分析 上面的代码中我们发现在模板中的标题上方也制作了一个插槽slot但是从效果上来看只是单纯把插入的内容复制了一份分别插入不同的插槽里面 其实我们上面写的都是默认插槽把插槽语法写完成如下
div idapponep slotdefault我是子标题/pp slotdefault我是子标题/pp slotdefault我是子标题/pp slotdefault我是子标题/pp slotdefault我是子标题/pp slotdefault我是子标题/p/one
/div
template idtemp1divslot namedefault/sloth2我是标题/h2slot namedefault/slot/div
/template默认情况下所有的slot都必须要指定一个name只是如果我们不自己指定的话系统会给我们指定一个默认的名称default
具名插槽
在上面的插槽中我们所有的slot如果在不指定name的情况下全都是default但是这个name属性可以设置的如果设置一些其他的值我们就把这个插槽叫做具名插槽
div idapponep slottop我是子标题/pp slottop我是子标题/pp slottop我是子标题/pp slotbottom我是子标题/pp slotbottom我是子标题/pp slotbottom我是子标题/p/one
/div
template idtemp1divslot nametop/sloth2我是标题/h2slot namebottom/slot/div
/template代码分析 在上面的代码中我们可以为插槽取一个名字从而实现一对多或者多对一的插入当插槽有了名字之后我们就可以在插入的时候指定插入到某一个插槽中 我们组件里面定义插槽的时候使用slot标签并且这个标签上面定义name属性成为具名插槽在调用组件的时候我们可以向指定的插槽插入内容只需要在这个插入的元素上面添加一个slot“插槽名”即可具名插槽是可以多次使用的所以我们可以把上面的top复制一份放到bottom的下面这样上面三个p标签也会出现在下面的插槽里面 插槽作用域
bodydiv idapponep我想要拿到组件内部的userName/p/one/divtemplate idtemp1divh2我是一个组件/h2slot!-- 组件的预留空间 --/slot/div/template
/body
script srcjs/vue.js/script
scriptlet one {template:#temp1,data(){return {userName:zhangsan}}}new Vue({el:#app,components:{one}})
/script之前我们一直都是外部的数据传递给内部如果要把组件内部的数据传递给外部我们可以
1、利用对象的堆栈原理
2、自定义事件 注意 我们现在要做一个区分我们是可以把数据渲染在组件里面的也可以渲染在插槽里面但是这两种方式在向组件外部传值的时候是有区别的我们上面说的这两种方法只针对在组件内渲染的如果是渲染在组件的插槽内部的我们可以通过插槽作用域取拿 比如我们现在要userName的值传递到外面我们可以在插入的标签上面添加一个slot-scope“scope”
bodydiv idapponediv slot-scopescopep{{scope.userName}}/pp{{scope.age}}/p/div /one/divtemplate idtemp1divh2我是一个组件/h2slot :user-nameuserName :age18!-- 组件的预留空间 --/slot/div/template
/body
script srcjs/vue.js/script
scriptlet one {template:#temp1,data(){return {userName:zhangsan}}}new Vue({el:#app,components:{one}})
/script插槽作用域旧版本语法
div idapponediv slotfooter slot-scopescopep{{scope.userName}}/pp{{scope.age}}/p/div /one/divtemplate idtemp1divh2我是一个组件/h2slot namefooter :user-nameuserName :age18!-- 组件的预留空间 --/slot/div/template新版本语法
onetemplate v-slot:footerscopep{{scope.userName}}/pp{{scope.age}}/p/template
/one最新语法
onetemplate #footer{userName,age}p{{userName}}/pp{{age}}/p/template
/one代码分析 最新语法可以直接解构获取并且v-slot这个指令也直接使用#来替代简化代码
