Functional Components A functional component is stateless, it cannot be instantiated and does not have any lifecycle or methods. Creating a functional component is also simple, just add the function declaration in the template. It is generally suitable for components that only depend on external data changes, and improves rendering performance due to its lightweight. Everything the component needs is passed through the context parameter. It is a context object, see the documentation for specific properties. Here props is an object containing all bound properties.
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{
{item.title}}</p>
<p>{
{item.content}}</p>
</div>
</div>
</template>
The parent component uses
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>
import List from @/components/List.vue
export default {
components: {
List
},
data() {
return {
list: [{
title: title ,
content: content
}],
currentItem:
}
}
}
3. Style scope It is very common to modify the style of third-party components in development, but due to the style isolation of the scoped attribute, it may be necessary to remove the scoped or create a new style. These practices have side effects (component style pollution, lack of elegance), and use style penetration in the css preprocessor to take effect. We can use >>> or /deep/ to solve this problem:
<style scoped>
Outer layer >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>