这是我参与「第五届青训营 」伴学笔记创作活动的第 十二 天

项目vue组件化学习

插槽

类似于这种

<!-- default slot -->
<foo v-slot="{ msg }">
    {{ msg }}
</foo>

<!-- named slot -->
<foo>
    <template v-slot:one="{msg}">
        {{ msg }}
    </template> 
</foo>

在example中调用foo组件时我们定义好插槽名称，通常插槽是放在template中，你可以尝试把它放,等其他标签会发现报错，这里<template>上使用v-slot来表示一个传入组件的插槽，通过指令参数来表示插槽的名称。在插件组件里面会把对应名称的插槽内容放入对应插槽中。

vue3文档

在调用组件时可以把v-slot定义好名称，在组件用name进行命名。

动态插槽

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

调用组件时如果没有指定插槽名称，那么就直接对应插入组件中。

传递props

组件里面定义好prop，使用组件时就可以通过prop进行传值。prop可以是数组，在使用时直接遍历

<!-- BlogPost.vue -->
<script>
export default {
  props: ['title']
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>

在props中注册了title，此title相当于父组件的一个属性，在父组件中使用:title进行赋值

<template>
	<BlogPost
  	v-for="post in posts"
	  :key="post.id"
  	:title="post.title"
	></BlogPost>
</template>

子组件向父组件抛事件

<!-- BlogPost.vue, 省略了 <script> -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">Enlarge text</button>
  </div>
</template>

在父组件中用@名称来监听子组件的事件，只有点击按钮触发子组件事件，父组件接收到才能在父组件触发父组件事件。在子组件emits声明要抛出的事件。 在父组件@click可以直接写方法

动态组件

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

在:is后面是什么组件名称，就会加载哪种组件

组件名称

短横线连字符

<table>
  <blog-post-row></blog-post-row>
</table>