vue-slotslot基本内容父组件传递内容给子组件扩展、复用、自定义组件类型默认slotnamedslotscopeslot父组件(father.vue):...
{{msg}}
...return{...name:'father'...msg:'这里是父组件'}子组件(son.vue):...
{{msg}}
...return{...name:'son'...msg:'这里是子组件，我有重要的事情要告诉父组件'}首先把子组件的内容放到父组件中，怎么放呢？首先在父组件中导入并注册子组件，在显示部分使用下面的
。此时除了父组件显示的内容外，子组件的内容也会显示在父组件（father.vue）中：显示部分-->...importsonfrom'./son'..
{{msg}}
p>
...return{...name:'father'...msg:'Thisistheparentcomponent'},components:{son}我们知道这个东西是父组件--->子组件传值，想在子组件中显示一些信息，那么怎么传值呢？可能有人会想是不是这样（比如我们传一句：'Ijustdon'tshow'）在
Ijustdon'tshowme
中添加不显示
显然这个不显示，你可以自己试试提示：这是错误的！！！父组件(father.vue):...importsonfrom'./son'。..
{{msg}}
我就是不显示
...return{...name:'father'...msg:'Thisistheparentcomponent'},components:{son}那我们要做什么操作呢？这时候就得用slot来操作了。在子组件显示内容下添加
后，父组件中子组件中
标签中的信息会显示子组件（son.vue):...
{{msg}}
...return{...name:'son'...msg:'这里是子组件，我有重要的是告诉父组件'}父组件(father.vue):...importsonfrom'./son'...
{{msg}}
我就是不显示
。..return{...name:'father'...msg:'这里是父组件'},components:{son}那么我们怎么理解这个slot呢？我们在子组件中添加的新内容，如果没有这个槽是不会显示的那么我们是不是可以理解为我们要展示的内容没有地方出去了，slot类似于我们新内容的一个outlet，可以添加slotslot默认的slot。我们希望子组件的slot有自己的默认内容，所以在子组件中的slot添加了一个子组件（son.vue），默认值是：...
{{msg}}
这是子组件的slot的默认值...return{...name:'son'...msg:'这里是子组件，我有重要的事情要告诉父组件'}然后这个时候，子组件被引入到父组件中，内容被添加到子组件。我们在父组件中传入的值将覆盖子组件插槽中的默认值。是默认的slot父组件（father.vue）：...importsonfrom'./son'...
{{msg}}
这就是我想要的传入子组件比如Thevalueof
...return{...name:'father'...msg:'hereistheparentcomponent'},components:{son}slotnamedslot如果我们在child组件中有不同的插槽，我们要显示不同的内容。在这种情况下，我们需要给槽命名，并使用一个新的属性名称来操作。Subcomponent(son.vue):...
{{msg}}
...return{...name:'son'...msg:'这里是子组件，我有重要的事情要告诉父组件'}我们给子组件命名完之后，希望能在父组件中找到我们命名的slot。在组件范围内添加一个模板标签，在中使用v-slot，给我们slot标签起个好名字，告诉他叫什么，然后显示其中的内容。对于v-slot的语法糖是#Thisisthenamedslotparentcomponent(father.vue):...importsonfrom'./son'...{{msg}}
这是子组件的slot1默认值的内容
这是子组件的内容defaultvalueofslot2
这是子组件的slotdefaultvalue3的内容
...return{...name:'father'...msg:'Hereistheparentcomponent'},components:{son}slotscopeslot我们在子组件中添加一个对象，并在槽中给他一些值我们新的家庭对象价值显示子组件(son.vue):...{{msg}}
{{someData.name}}...return{...name:'son'...msg:'这里是子组件，我有重要的事情要告诉父组件',someData:{name:'panda',job:'fontEndCoder'}}了解了默认槽后，我们知道虽然有一个slot已经赋值显示了，所以这时候我们很容易覆盖父组件中的默认值，如下父组件（father.vue）所示：...importsonfrom'./son'...{{msg}}
XXX...return{...name:'father'...msg:'Hereistheparentcomponent'},components:{son}那么我们希望子组件已经被父组件覆盖了，我想用someData.job来覆盖someData.name的值。怎么做？！！！这是错误的，会报错！！！我们应该做什么？我们需要将定义好的对象传递给父组件传递给父组件。我们可以给子组件槽中绑定的操作起一个新的名字。我们只需要告诉新名称我们定义的对象叫什么。子组件(son.vue):...{{msg}}
{{someData.name}}...return{...name:'son'...msg:'这里是子组件，我有重要的事情要告诉父组件',someData:{name:'panda',job:'fontEndCoder'}}那么应该如何父组件接受的依然是模板标签，其中v-slot用于操作和赋名。我们在父组件中创建的someDtProp就是我们在子组件中创建的someDt中包含的数据！！！！！！！那么在父组件中{{someDtProp.someDt.job}}就可以进行这样的操作。这很复杂。这就是为什么作用域槽？我们的父组件是一个范围，我们的子组件也是一个范围。我们在父组件中获取子组件中的数据，进入子组件的作用域。这个用的不多。父组件(father.vue):...importsonfrom'./son'...{{msg}}
{{someDtProp.someDt.job}}...return{...name:'father'...msg:'这里是父组件'},components:{son}如果有多个槽呢？我们在子组件中给我们定义的对象添加一个值，在slot中给子组件命名（son.vue）：...{{msg}}
{{someData.name}}{{someData.job}}...return{...name:'son'...消息:'这是子组件，我有重要的事情要告诉父组件',someData:{name:'panda',job:'fontEndCoder',like:'cola'}}然后父组件必须重命名，将之前的默认名称改为我们刚刚在组件中创建的名称。这是一个子组件传值覆盖父组件中子组件内容范围的例子。父组件(father.vue):...importsonfrom'./son'...{{msg}}
<儿子>{{someDtProp.someDt.like}}{{someDtProp.someDt.job}}...return{...name:'father'...msg:'这是父组件'},components:{son}
