[vue3进阶] 6.slot插槽3——作用域插槽

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[vue3进阶] 6.slot插槽3——作用域插槽相关的知识,希望对你有一定的参考价值。

参考技术A 作用域插槽——又是一个抽象的名字,那我用简单的语言解释一下
当父组件里写的插槽的内容需要使用子组件里的数据时,这时候就要用作用域插槽这个功能
可能你还是没明白,不过没关系,咱们还是通过写一个小例子来学习

我们现在有一个子组件,叫heroList,顾名思义就是要显示一个英雄列表,
咱们快速的把它写出来,都是以前学过的内容

然后在App.vue里面使用它

显示结果是

然后需求变复杂了,在使用这个组件时,需要把名字渲染到不同的标签里

或者

这时,我们想到可以把li里面写一个slot,然后里面的标签从父组件使用slot插入进来就可以了

App.vue里面修改

发现h2标签倒是有了,但是名字没了

因为根本没有在h2里面放内容啊

然后把item放进去

发现仍然不行,因为item是heroList组件里面数据,在App.vue不能直接使用,即使是在slot里面
那vue还是提前准备好了这个问题的解决方案了,提供了在父组件中使用子组件数据的语法
先修改heroList子组件

给slot标签绑定了一个属性,名字叫做heroName,绑定的值就是item,
heroName这个名字是我们自己起的,你可以起你喜欢的名字,后面用时候对应上就行了,
item就是我们循环出来的英雄的名字了
第二步修改父组件App.vue

这里复杂一点,咱们一点一点解释
1.更上节课一样,我们的slot内容先用一个template标签包住
2.也是使用v-slot,它等于一个值slotProps,slotProps这个名字你也可以随你喜欢起,它表示一个对象,这个对象里存着子组件要在父组件里使用的数据,
3.slotProps这个对象里存放我们在子组件里定义的heroName这个值,把它绑定到h2中

这样列表就显示出来了

我们上面没有给子组件的slot起名字,使用时也没有名字

其实和

是一样的

如果给slot起一个名,修改heroList

那么在使用时,必须指定名字,修改App.vue

根据我们之前学习的简写,可以写成

插槽的内容就说这么多了,肯定有初学的小伙伴表示,插槽的语法这么多,记不住啊,
我还是要强调一下写法什么的不要死记,记不住也没关系,知道有这么个功能就行了,
等需要时,再到官网去查就行
还有像作用域插槽,在工作中用的地方并不多,
主要集中在表格、列表使用第三方ui库展示时,比如element-ui,到时候再去看官网例子也不晚

Vue进阶学习

                          Vue进阶学组件

1.组件的学习:

  首先想要使用vue的组件 那么需要引入一个支持vue的jsp文件 

      <script src="node_modules/vue/dist/vue.js">

  1.model指令的学习  

    model指令的意思:用于双向绑定且只能用到表单元素当中

      试列代码:

<head>
<meta charset="UTF-8">
<title>model指令</title>
<script src="node_modules/vue/dist/vue.js">


</script>
</head>
<body>
<!--model双向绑定-->
<div id="app">
佛曰:<input type="text" v-model="username"/>username<br>

城市 <br> <input type="checkbox" value="1" v-model="taty"/>成都
<input type="checkbox" value="2" v-model="taty"/>绵阳
<input type="checkbox" value="3" v-model="taty"/>江油<br>taty<br>
性别:sex<br> <input type="radio" value="1" v-model="sex"/>
<input type="radio" value="2" v-model="sex"/><br>

爱好:<select v-model="aihao">
<option value="1">吃饭</option>
<option value="2">睡觉</option>
<option value="3">打豆豆</option>
</select>aihao<br>

来自外星球的奥特曼:<br><textarea v-model="introval">
</textarea>introval

</div>

<script>
new Vue(
el:"#app",
data:
username:"罗将是瓜皮",
taty:[],
sex:2,
aihao:1,
introval:"我是奥特曼,我来打怪兽"


)

</script>



</body>
</html>

       2.show指令

    show指令的意思:改变一个元素是否显示隐藏

        试列代码:

<head>
<meta charset="UTF-8">
<title>show指令</title>
<script src="node_modules/vue/dist/vue.js">

</script>
</head>
<body>


<inpuqt type="button" value="点一点" onclick="hh()"/>
<div id="app" v-show="show">
<img src="img/1.jpg" width="1000px" height="500px" >

</div>

<script>
let j=
new Vue(
el:"#app",
data:
show:false
,method:


)
function hh()
j.show =! j.show


</script>



</body>
</html>

  3.if指令

     if指令的含义:表示判断 如果成立就展示该属性

      试列代码:

<head>
<meta charset="UTF-8">
<title>if指令</title>
<script src="node_modules/vue/dist/vue.js">

</script>
</head>
<body>
<div id="app" >
<div v-if="age<22">还不能结婚</div>

<div v-else-if="age>22 && age<80">太老了 就别想了</div>

<div v-else="age>80">天人</div>


</div>
<script>
new Vue(
el:"#app",
data:
age:20


)

</script>


</body>
</html>

    4.for指令和if判定的一个综合使用:

<head>
<meta charset="UTF-8">
<title>练习</title>
<script src="node_modules/vue/dist/vue.js">

</script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>状态</th>
</tr>
<tr v-for="v in students">
<td>v.id</td>
<td>v.name</td>
<td>v.age</td>
<td>v.sex?"男":"女"</td>
<td>
<span v-if="v.aa==1"></span>
<span v-else-if="v.aa==2"></span>
<span v-else-if="v.aa==3"></span>
<span v-else="v.aa==4">极差</span>
</td>
</tr>
</table>


</div>
<script>
let v = new Vue(
el:‘#app‘,
data:
students:[
id:1,name:"憨憨",age:18,sex:false,aa:1,
id:2,name:"傻狗",age:19,sex:true,aa:2,
id:3,name:"憨够",age:18,sex:false,aa:3,
id:4,name:"二傻子",age:18,sex:true,aa:4
]



)


</script>



</body>
</html>

2.事件的学习: on

    什么是on事件:就是平常的绑定事件  但是这个是vue提供的所以可以简化来写

      原生写法:v-on:click="hh()"

      简写:@click="ee()"

        代码试列:

<head>
<meta charset="UTF-8">
<title>on事件</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-on:click="hh()" type="button" value="点我" />
<input @click="ee()" type="button" value="再来点我" />
</div>
<script>
new Vue(
el:"#app",
data:,
methods:
hh()
alert("叫你点你就点,真鸡儿听话")
,
ee()
alert("罗将是瓜皮")



)


</script>





</body>
</html>

3.属性的学习:

  1.computed计算属性  主要用于JS代码中的大量数据计算的时候使用

    列计算当前时间:

 

<body>

<div id="app">
formatDate
</div>

<script>

var v = new Vue(
el:"#app",
//属性,一般是写死(从后台读取)
data:
bronDate:1566526686736
,
//计算属性
computed:
//这里看起来是一个方法,但是使用是当做属性来使用
formatDate()
let date = new Date(this.bronDate);
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();


)


</script>
</body>

 

 2.watch监控属性:目的监控某个属性 一般写死从后台读取 试列代码:

<div id="app">
<input type="text" v-model="msg">
</div>

<script>

var v = new Vue(
el:"#app",
//属性,一般是写死(从后台读取)
data:
msg:"郑成功"
,
watch:
//每次msg属性修改,都会执行这个方法
/**
* 第一个参数:新属性(修改后)
* 第二个参数:旧属性(修改前)
*/
msg(newVal,oldVal)
console.debug(newVal,oldVal)


)


</script>
</body>

3.组件的学习

  组件template标签:切这两个表片都可以定义组件模板    template标签放在挂钩容器中将会显示该模板的样式

  组件script标签:script则不会显示模板的样式

  自定义组件:什么是自定义组件 就是自己定义组件切给与你所需要的属性的组件:

    代码走你:

<head>
<meta charset="UTF-8">
<title>自定义组件抽取</title>
<title>Title</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>

</div>
<script>
//全局抽取
const b = "<h1>抽取</h1>";

const a =
template:b


Vue.component("mycomponent",a)



new Vue(
el:"#app"
)

</script>

</body>

4.路由的学习:

  路由是vue支持的但是需要引入插件:命令 npm install vue-router 当然有了插件需要引用才会有效果 需要先引入支持vur的插件在引用路由的插件<script src="node_modules/vue-router/dist/vue-router.js"></script>

  试列代码:

<body>
<div id="app">
<p>
<router-link to="/student">风景</router-link>
<router-link to="/teacher">洗手间景</router-link>
<router-link to="/school">人景</router-link>
</p>
<!--路由出口必须在挂载容器里面-->
<router-view></router-view>
</div>

<script>
const aa = ‘<div><img src="img/1.jpg" width="400px" height="400px"> </div>‘
const bb = ‘<div><img src="img/4.jpg" width="400px" height="400px"></div>‘
const cc = ‘<div><img src="img/5.jpg" width="400px" height="400px"></div>‘

const aaa = template:aa
const bbb = template:bb
const ccc = template: cc

const q = new VueRouter(
routes

)

const s = ‘/student‘
const t = ‘/teacher‘
const sc = ‘/school‘

const routes = [

path:s , component: aaa,
path:t, component: bbb ,
path:sc, component: ccc

]

new Vue(
el:"#app",
router:q

)



</script>

</body>

5.VueClt学习:vue提供脚手架快速搭建web工程模板

    1.准备模块

技术图片

    2.使用dos命令进去该模块层

      3.输入命令进行初始化   vue init webpack : 初始化

     4.初始化完成过后直接启动    npm run dev : 直接运行

     第一个选择yes一路回车到vue-pouter:是否引用路由选择yes其余全部no

 

以上是关于[vue3进阶] 6.slot插槽3——作用域插槽的主要内容,如果未能解决你的问题,请参考以下文章

vue3插槽具名插槽作用域插槽-足够入门了!

Vue3 slot插槽——(默认插槽具名插槽作用域插槽)

Vue3组件化开发

Vue3 插槽使用详解

Vue 3 - 从插槽内的子组件发出事件

来自子组件的 Vue 3 插槽样式