作者：哇哈时候_206 | 来源：互联网 | 2023-10-11 11:42
篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue自学入门-4（vueslot）相关的知识，希望对你有一定的参考价值。好长时间没有用vue了，从新安装vue脚手架
篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue自学入门-4（vue slot）相关的知识，希望对你有一定的参考价值。
好长时间没有用vue了，从新安装vue脚手架。
1、从新安装webpack
cnpm install --save-dev webpack
2、vue init webpack my-project-slot
3、进入目录 cnpm install
4、cnmp run dev
启动成功
5、router-view 部分会被替换成HelloWorld.vue内容
6、修改helloworld.vue内容如下
<template>
<div class="hello">
HelloWorld
div>
template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
msg: ‘Welcome to Your Vue.js App‘
}
}
}
script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
style>
7、界面如下
8、下面开始slot测试
(1)修改HelloWorld增加
<template>
<div class="hello">
HelloWorld
<slot>11111111111slot>
div>
template>
(2)修改App.Vue
可见，会将定义中的bbbb覆盖掉子组件slot中的内容
（3）定义两个slot,可以发现两个都被替换
（4）给slot命名，slot将不受影响
（5）修改App.Vue,如下，插槽为a的被替换
(6)修改style,说明是将元素自身进行插槽
（7）定义一个具有slot特性值为c的元素，因为组件中不存在该插槽，将被抛弃。
如上，定义了name的叫做具名插槽，否则叫匿名插槽，可以这样理解，有name的插槽相当于有锁的房门，必须有对应的钥匙才能打开
京公网安备 11010802041100号