First, let's use an analogy. Suppose you are a hamburger and your friends are various ingredients, such as beef patties, lettuce, cheese, etc. Then, the template is the ingredients on your body, and the slot is your friends - different ingredients can be combined into different hamburgers, just like different templates can be combined into different interfaces.
Now, let's look at the usage of slot and template through some examples!
First, let's look at how to use slots. Suppose you are an e-commerce website and you want to display an "Add to Cart" button when users see the product details page. You can use slots in components to achieve this purpose:
<template>
<div>
<h1>{
{ product.name }}</h1>
<p>{
{ product.description }}</p>
<slot></slot>
</div>
</template>
In this example, we place an empty slot in the component, and then use this slot in the parent component to insert the button we want:
<template>
<div>
<h1>苹果手机</h1>
<p>苹果公司推出的智能手机</p>
<my-product>
<button>加入购物车</button>
</my-product>
</div>
</template>
As you can see, we use the my-product component in the parent component, and then insert a button element into it. This button element will be rendered in the slot of the my-product component, thereby achieving the effect of displaying the "Add to Cart" button on the product details page.
Now, let's see how to use template. Suppose you are a news website and you want to display some advertisements or related article recommendations on the article details page. You can use templates in components to achieve this purpose:
<template>
<div>
<h1>{
{ article.title }}</h1>
<p>{
{ article.content }}</p>
<template v-if="showAds">
<ad></ad>
</template>
<template v-if="showRelated">
<related-articles></related-articles>
</template>
</div>
</template>
In this example, we use two template elements to display advertisements and related article recommendations respectively. Depending on the condition v-if, only one of the template elements will be rendered. In the parent component, we can use this component like this:
<template>
<div>
<h1>人工智能将改变世界</h1>
<p>人工智能是现如今计算机领域的一大热门技术...</p>
<my-article>
<script type="text/x-template">
<ad></ad>
</script>
<script type="text/x-template">
<related-articles :articles="relatedArticles"></related-articles>
</script>
</my-article>
</div>
</template>
As you can see, we use the my-article component in the parent component, and then insert two script elements into it. These two script elements contain the template code for the ad and related-articles components respectively. In the my-article component, one of the script elements will be selected to render based on the condition v-if. In this way, we can display advertisements or related article recommendations in the article details page.
Now, let us summarize the difference between slot and template!
Slot is a way to define an empty slot in a component, which can be filled in the parent component, thus extending the functionality of the component. The slot element can contain any content, including HTML elements and components.
The template element is a way to define a template in a component, which can select different templates for rendering based on conditions. The template element can only contain template code and no other content.
For example, let's say you're a restaurant and you want to display a soup item on your menu. You can use slot to define an empty slot, and then use this slot in the parent component to insert the name and price of the soup:
<template>
<div>
<h1>菜单</h1>
<slot></slot>
</div>
</template>
In the parent component, you can use this menu component like this:
<template>
<div>
<my-menu>
<script type="text/x-template">
<h2>今日汤品：</h2>
<p>{
{
soupName }}</p>
<p>{
{
soupPrice }}</p>
</script>
</my-menu>
</div>
</template>
In this way, we can display the name and price of the soup in the menu. And if you want to display multiple soup items in the menu, you can use multiple slot elements in the parent component, and then insert different content into each slot.
To sum up, slots and templates are very useful features in Vue3. You can choose which method to use to extend the functionality of the component according to your needs, thereby creating more flexible and reusable code. Finally, if you want to learn more details and best practices about Vue3, you can refer to the official Vue3 documentation, which contains a lot of useful information and guidance.