vue 插槽理解

插槽,顾名思义留一个坑在组件中,然后动态的去填坑,例如:

//Child.vue  子组件

<template>
    <div>
            <slot></slot>
    </div>
</template>
<script>
</script>
<style lang="">

</style>

//Parent.vue   引入子组件的文件

<template>
    <div>
            <my-child>
                    123
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">

</style>

//这个时候,我们的页面就会显示123,在Child.vue中我们使用的slot就是坑位,在Parent.vue中,引用组件中传入的123就是填坑的内容,因为slot没有命名,这里称为不具名插槽

那么现在咱们来看看具名插槽的写法

//Child.vue  子组件

<template>
    <div>
            <h1>--------------分割线--------------------</h1>
            <slot name="navBar"></slot>
            <h1>--------------分割线--------------------</h1>
            <slot name="endBar"></slot>
            <h1>--------------分割线--------------------</h1>
    </div>
</template>
<script>
</script>
<style lang="">

</style>

//Parent.vue   引入子组件的文件

<template>
    <div>
            <my-child>
                    <template slot="navBar">
                            234
                    </template>
                    <template slot="endBar">
                            345
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">

</style>

//这个时候我们需要注意的是,在Child.vue中,用name来标识该插槽slot,而在使用中,我们用<template slot="表示名">来传入指定的插槽

还有一个插槽方式叫做作用域插槽

//Child.vue  子组件

<template>
    <div>
             <!-- 这里的test作为键  ParentFromData 作为值返回给父组件 {test:  'Hello Vue!!!'}-->
            <slot :test="ParentFromData"></slot>
    </div>
</template>
<script>
export default {
    prop: ['ParentFromData']
}
</script>
<style lang="">

</style>

//Parent.vue   引入子组件的文件

<template >
    <div>
            <my-child :ParentFromData='data'>
                    <template slot-scope='ChildFromData'>
                          {{ChildFromData}}
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   data(){
        return{
            data: 'Hello Vue!!!'
        }
    }
   components: {myChild: Child}
}
</script>
<style lang="">

</style>

//此时的流程是,Parent.vue通过  prop 将 ParentFromData传递给Child.vue,而Child.vue拿到值以后将值赋值给test  形成键值对{test: 'Hello Vue!!!'} 返回给Parent.vue,从而页面显示的结果为{test: 'Hello Vue!!!'}
//我发现一个vue文件里面只能有一个作用域插槽

原文地址:https://www.cnblogs.com/yzyh/p/10124167.html

时间: 2024-10-08 01:08:32

vue 插槽理解的相关文章

Vue插槽、ref和$refs用法

1.vue插槽 1.插槽的作用:以局部组件为例 插槽就是Vue实现的一套内容分发的API,将<slot></slot>元素作为承载分发内容的出口.插槽内可以是任意内容. (1)不带插槽的情况: <div id="app"> <vue> <h2>我是里面的内容</h2></vue> </div> <script> var Child = { template: '<div&g

vue插槽slot的理解与使用

一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示.其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将<slot>&l

vue Slot理解

简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> <p>hello,world!</p> </my-component> // 组件内部(子) <div class="child-page"> <h1>子页面</h1> <slot></slot> /

Vue nextTick 理解

官网解释: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 我的理解:在vue完全操作完DOM之后的回调函数. 也就是说如果不调用nextTick直接用JS操作DOM的话,会出现DOM不一样的状态(数量或者属性等)

vue之理解异步更新 --- nextTick

默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要. 当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入这个队列,加入一个watcher在一个事件循环中被触发了多次,它只会被推送到队列中一次, 然后在进入下一次的事件循环时,Vue会清空队列并进行必要的DOM更新,.在内部,Vue 会使用 MutationObserver 来实现队列的异步处理,如果不支持则会回退到 setTimeout(fn, 0).

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>

Vue插槽

插槽内容 Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将<slot>元素作为承载分发内容的出口. <navigation-link url="/profile"> Your Profile </navigation-link> 然后在<navigation-link>的模板中可能会写为: <a :href="url" class="nav-link"> &l

前端框架MVVM和VUE的理解和应用

市面上很多开源的程序里面用的前端框架以前大多用的MVVM的框架,后面逐渐的都被VUE的框架代替了,像一些比较活跃的开源程序更新轨迹上就可以看到一开始用的是MVVM模式,后期更新为VUE的框架,类似开源商城DSMall3.0之前手机端用的是MVVM模式,在3.0之后便更换成VUE的框架了,那MVVM和VUE个有什么不同呢?一.对于MVVM的理解??MVVM?是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View?代表

2.6.0版vue 插槽文档小结

<slot>插槽  一般使用组件时 在标签内填写的内容是不被编译的,当想要在父级使用组件时能填写内容则需要在定义组件时添加<slot></slot>标签,在插槽内可以给上默认内容,当父级调用时没有给内容时也就有了默认的值 一个不带 name 的 <slot> 出口会带有隐含的名字"default". 具名插槽 在需要多个插槽的模板中,为了区分插槽,使用name属性,然后在父级使用组件时用v-slot:header区分要为哪个插槽添加内容,