Vue solt 插槽使用~

一、基本使用：

子组件：

在子组件中使用<slot></slot>给值留下位置，可以得到父组件的值

<div>

<strong>ERROR:</strong>

</div>

</template>

export default {

name:'soltOne'

}

</script>

<style>

</style>

父组件：

<solt-one>有Bug发生</solt-one>

二、域名插槽的基本使用

子组件：

简单的划分了三个区域，一个头部，内容，尾部

头部和尾部<slot></slot>都给了name 让其获得域名

<div>

</header>

<main>

</main>

</footer>

</div>

</template>

export default {

name:'soltTwo'

}

</script>

<style>

</style>

父组件：

在此内容下，p标签内只要对应子组件起的name名，就能把值赋值到想要的地方，

没有name名的将会赋值到，子组件中没有name名的位置。

<solt-two>

</solt-two>

父组件还有一种，可以通过域名来实现插槽，使用v-slot:来获取子组件的域名，从而指定赋值，其中也可以添加多条内容，比上一种方法更完善。

<solt-two>

</template>

</template>

</solt-two>

注意：

这里的顺序是根据子组件的顺序排列，父组件跟换域名位置，还是按照子组件的域名排序出现

内容会跟着父组件发生改变

<solt-two>

</template>

</template>

</solt-two>

三如何通过slot从子组件获取内容

子组件：

这里需要注意的是，要将子组件的值进行v-bind绑定

<div>

</slot>

</div>

</template>

export default {

name:'soltThree',

data(){

return{

list:[1,2,3,4,5,6,7,8,9]

}

</script>

<style>

</style>

父组件：

一下提供了四种，子组件的值可以使用v-for遍历，这里的list1是自己新起的名字，son是子组件绑定的，slot-scope这种方法逐步出现了淘汰， #default这种方法比较推荐，看起来就很简单好记

第一种：

<solt-three>

</template>

</solt-three>

第二种：

<solt-three>

</template>

</solt-three>

第三种：

<solt-three>

<ul>

</ul>

</template>

</solt-three>

第四种：

<solt-three>

</template>

</solt-three>

Vue solt 插槽使用~相关推荐

vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
vue 组件插槽solt 的使用
最近在写项目时接触到了这个组件,所以这次的blog想要记录下当时的问题. 场景: 在列表筛选时,情况一,页面显示出筛选的列表内容,情况二,页面显示"暂无该筛选信息!",所以想要做出 ...
【Vue】—插槽的基本语法
[Vue]-插槽的基本语法 <template><div><h1>这是父级</h1><Son><div><p>nam ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
vue具名插槽的使用
vue的插槽自我总结 vue的匿名插槽(默认插槽) vue的具名插槽 vue的作用域插槽 vue的匿名插槽(默认插槽) 父组件 <div><myslot>我是刚刚</my ...
vue 具名插槽用法
vue 具名插槽用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
14. vue的插槽
vue的插槽插槽这个概念相对就比较抽象,但抽象的概念用生活中常见的事物去做类比,也就变得没那么抽象了! 举一个生活中的例子:比如装修房子的时候我们会在很多地方预留出一些插孔,可能要插电冰箱,插电式, ...
Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
vue作用域插槽，你真的懂了吗？
前言在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点理解. slot大家看看文档都懂了 ...

Vue solt 插槽使用~

Vue solt 插槽使用~相关推荐

最新文章

热门文章